nx 13 storybook does not pull in assets or global styles

[jasedwards]

Current Behavior

When I run storybook against a library no global styles or assets are included.

Expected Behavior

In previous versions when running storybook it would run it against your default app. My default app would have a styles.scss that imported a global sass styles as well as an assets folder. Now it appears no apps are used/needed so nothing gets pulled in

Steps to Reproduce

just generate a workspace, app and lib. use global styles and see that they are not applied.

Environment

Node : 14.17.0
OS : win32 x64
npm : 6.14.13

nx : undefined
@nrwl/angular : 13.4.6
@nrwl/cli : 13.4.6
@nrwl/cypress : 13.4.6
@nrwl/devkit : 13.4.6
@nrwl/eslint-plugin-nx : 13.4.6
@nrwl/express : undefined
@nrwl/jest : 13.4.6
@nrwl/linter : 13.4.6
@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.4.6
@nrwl/web : undefined
@nrwl/workspace : 13.4.6
@nrwl/storybook : 13.4.6
@nrwl/gatsby : undefined
typescript : 4.5.4
rxjs : 7.4.0

Community plugins:
@angular/animations: 13.1.2
@angular/cdk: 13.1.2
@angular/common: 13.1.2
@angular/compiler: 13.1.2
@angular/core: 13.1.2
@angular/forms: 13.1.2
@angular/localize: 13.1.2
@angular/material: 13.1.2
@angular/platform-browser: 13.1.2
@angular/platform-browser-dynamic: 13.1.2
@angular/router: 13.1.2
@ng-bootstrap/ng-bootstrap: 11.0.0
@ngrx/component-store: 13.0.2
@ngrx/effects: 13.0.2
@ngrx/entity: 13.0.2
@ngrx/router-store: 13.0.2
@ngrx/store: 13.0.2
@angular-devkit/build-angular: 13.1.3
@angular/cli: 13.1.3
@angular/compiler-cli: 13.1.2
@angular/language-service: 13.1.2
@ngrx/schematics: 13.0.2
@ngrx/store-devtools: 13.0.2
@schematics/clearsight: 0.0.1
@storybook/angular: 6.4.13
eslint-plugin-ngrx: 1.46.3

[mandarini]

Hi there @jasedwards! Thanks for filing an issue!

Please take a look at this. Since the latest version of Storybook/Angular there were some issues with the defaultProject. For that reason, we encourage people to use the projectBuildConfig flag/option, in order to specify which project they want to use the build options for. You can either set this up in your project.json or through the command (nx storybook myproject --projectBuildConfig=myproject). Let me know if something is unclear!

[jasedwards]

@mandarini
Am I misunderstanding or does this mean that I need an 'app' for every library I want to do a storybook for? take for example:

1. I have an app called myapp. this imports global scss, has an assets folder with icons...
2. I have a lib called mylib.
3. I have a lib called mylib2.

If the components in mylib and mylib2 depend on global styles I need to apparently use a projectConfig from myapp. myapp config would either need to pull in stories from mylib and mylib2 or I need a 2nd app for mylib2.

Is this correct? Before the upgrade, I could use config for each lib but it would build my default app, which pulled in the assets and global scss. My repo has over 200 libs so if this is the case then storybook has become unusable for me unless I want to run stories for all libs everytime just to test out one component.

[mandarini]

Hi @jasedwards ! Let's take this step by step, and don't worry, we'll figure it out! I am sure that Storybook is not unusable for you, since I am sure the Storybook team is taking into account cases like yours! :)

You definitely do NOT need an app for every library you use Storybook for! :) What happens if you use the projectBuildConfig flag like this:

nx storybook mylib --projectBuildConfig=myapp

and

nx storybook mylib2 --projectBuildConfig=myapp

?

[jasedwards]

@mandarini Ok, I should have just tested that out before responding. I assumed setting the project build config to the app would use that tsconfig and main.js and end up pulling in all stories for the entire repo but it did not. So to fix this I just need to set my build configs to use the app build config for each. Thanks for your help

[mandarini]

@jasedwards Yep, that's what you need to do! You can do this on your libraries' project.json files, so that you do not have to run the command with the flag each time! :) Let me know if you need any help.

Storybook uses the main.js inside each project's .storybook folder to find the stories, so no need to worry about that!

[rmeshksar]

Hi,
I am also having issue with this.
I have an Angular application (myApp) and an Angular library (myLib).

The components in the library are using bootstrap styles.

I tried the following approaches and still bootstrap styles are not applied in the storybook:

Approach 1:
Adding bootstrap in the styles section of build of project.json for myApp. (Application itself works fine).
Running storybook like this:
nx storybook myLib projectBuildConfig=myApp

Approach 2:
Adding this in the preview.js file under libs/myLib/.storybook:
import '!style-loader!css-loader!sass-loader!./../../../../node_modules/bootstrap/scss/bootstrap.scss';

[jasedwards]

@rmeshksar What I ended up doing was creating an app called storybook-wrapper. in this I have my styles.scss that imports any global styles. then I use that project config to storybook libraries. The added benefit of this is that I can also run storybook on storbook-wrapper and with a tweak of main.js I am able to have one site showing stories for all components in all libs.

[rmeshksar]

Thanks @jasedwards .
I will try this approach but I am curious to know how it is different from my case that I use myApp project configuration to run the storybook.

[jasedwards]

@rmeshksar You mentioned trying to import the scss from project.json or preview.js. The advantage of having an app dedicated to running storybook config is that you can just import that stuff like any other app

[rmeshksar]

Currently I have bootstrap in the list of styles in the myApp project.json file.
Should that get applied to my storybook if I use myApp as the configuration to build storybook?

[jasedwards]

I am unfamiliar with how the project.json relates to adding styles. I always just import what I need in the styles.scss file

[rmeshksar]

I added the bootstrap css file to the styles section of the myLib project.json like below and it works.
Thanks for your help.

[mandarini]

Hi all, I'll make sure to add some clearer documentation on that some time soon! :)

[mandarini]

New docs for styles and stylePreprocessorOptions

[MRezaSafari]

just add this to your library .storybook/preview.js file and your good to go

// eslint-disable-next-line import/no-webpack-loader-syntax
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
import '../../../apps/machines-validator/styles/global.scss';

[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.