Angular / Storybook: styles.scss of the default project is used for all storybook configs

[simpros]

Current Behavior

After adding storybook-config to a library, the styles.scss of the default application (specified in nx.json) will be applied to all stories.

Expected Behavior

The storybook styling should be independent of any application styling

Steps to Reproduce

1. Create a new nx workspace with the angular preset.
2. Add a library to the workspace
3. Create an component in the library
4. Add the storybook-configuration for the library
5. Run storybook for the library
6. Change the styling in the app´s styles.scss

I have created an demo repository for easier reproduction

Environment

  Node : 14.17.0
  OS   : darwin x64
  yarn : 1.22.17
  
  nx : 13.3.5
  @nrwl/angular : 13.3.5
  @nrwl/cli : 13.3.5
  @nrwl/cypress : 13.3.5
  @nrwl/devkit : 13.3.5
  @nrwl/eslint-plugin-nx : 13.3.5
  @nrwl/express : undefined
  @nrwl/jest : 13.3.5
  @nrwl/linter : 13.3.5
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : undefined
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.3.5
  @nrwl/web : undefined
  @nrwl/workspace : 13.3.5
  @nrwl/storybook : 13.3.11
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 7.4.0
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.1.1
         @angular/cdk: 13.1.1
         @angular/common: 13.1.1
         @angular/compiler: 13.1.1
         @angular/core: 13.1.1
         @angular/forms: 13.1.1
         @angular/material: 13.1.1
         @angular/platform-browser: 13.1.1
         @angular/platform-browser-dynamic: 13.1.1
         @angular/router: 13.1.1
         @angular-devkit/build-angular: 13.0.4
         @angular/cli: 13.0.4
         @angular/compiler-cli: 13.1.1
         @angular/language-service: 13.1.1
         @storybook/angular: 6.4.9

[joewIST]

I am also experiencing this issue. No matter what I use for browserTarget in angular.json, the defaultProject in nx.json is always used in the storybook build, which means any global styles (in the library's styles array in angular.json) are not applied. I haven't been able to find an adequate workaround yet (other than needlessly adding irrelevant stylesheets to the defaultProject's styles array. Any tips?

[mandarini]

Hi there! Thank you @CodeCakePie @joewIST for filing this issue!

Can you try setting the --projectBuildConfig flag to the project you want the use the styles from when you're running/building Storybook, and let me know if your issue is resolved?

eg.

nx storybook your-project-name --projectBuildConfig="your-project-name"

or

nx build-storybook your-project-name --projectBuildConfig="your-project-name"

[mandarini]

btw, maybe a small adjustment in the codebase, and some documentation will land at some point in January to make this a bit clearer.

[mandarini]

Linking this for reference #8199

[joewIST]

@mandarini yes that fixes things, thank you. i was unable to find any reference to this projectBuildConfig before

[mandarini]

That's great @joewIST ! I will go ahead and close this issue for now. If it ever comes up again, I'll make sure to open it up! :) Thank you!

[joewIST]

unfortunately i now get a new issue which means it can't even build at all: TypeError: getTypescriptWorkerPlugin is not a function

[mandarini]

@joewIST Ohh that's the Storybook Angular 13.1 bug! You should be good if you upgrade Storybook to the pre-release version, as mentioned here.

[joewIST]

hi @mandarini that does not fix things i'm afraid

[mandarini]

The "TypeError: getTypescriptWorkerPlugin is not a function" is a bug on the Storybook side. Storybook v6.4.9 does not work with Angular 13.1, because Storybook v.6.4.9 references the getTypescriptWorkerPlugin from Angular, which, in version 13.1 has been renamed to getDevServerConfig. Can you try what is suggested here in this comment? This should definitely fix that exact issue. And let me know what you get!

[rfprod]

The "TypeError: getTypescriptWorkerPlugin is not a function" is a bug on the Storybook side. Storybook v6.4.9 does not work with Angular 13.1, because Storybook v.6.4.9 references the getTypescriptWorkerPlugin from Angular, which, in version 13.1 has been renamed to getDevServerConfig. Can you try what is suggested here in this comment? This should definitely fix that exact issue. And let me know what you get!

@mandarini https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.6 works
Configs -> storybookjs/storybook#16977 (comment)

[joewIST]

hi @mandarini i have tried that solution and now get the following error:

ModuleParseError: Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

[mandarini]

Hmmm I am worried that this may be on the Storybook side @joewIST ! Can you read through the above issue to see if there's anything reported that matches your case?

[joewIST]

i will have a look thanks, there seem to be so many issues re: storybook/nx/angular integration atm!

[mandarini]

Indeed.. We'll get there! :)

[mandarini]

@joewIST Another potential solution would be do undo the changes to the storybook side that you did, and downgrade Angular to 13.0? I am not 100% sure, but maybe it could help you get going in the meantime, while a solid fix is in place?
@rfprod wdyt?

[joewIST]

@mandarini i'm going to try to investigate whatever storybook issues might be causing this and if i can't find anything i'll have to park this for now. i've already spent so much time trying to upgrade to angular v13 these last few weeks

[mandarini]

Sounds good @joewIST ! I am sorry I could not help you any further. We're all trying our best to fix these issues. I will post any potential updates here. Good luck! :)

[rfprod]

@joewIST Another potential solution would be do undo the changes to the storybook side that you did, and downgrade Angular to 13.0? I am not 100% sure, but maybe it could help you get going in the meantime, while a solid fix is in place? @rfprod wdyt?

@mandarini If you want my opinion, it seems to me that it makes sense to downgrade to Angular 13.0 as a default version until storybook 6.5.0 is released, so that newly created projects work out of the box. However, I don't see any issues tweaking configs to be able to use the latest versions. It's time consuming for sure, but it pays off imo.

[mandarini]

Thanks @rfprod ! :)

[mandarini]

New docs for styles and stylePreprocessorOptions

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.