Storybook global styles not used for library component

[DimitriLib]

I am trying to access application/global styles from storybook library. My setup new repository with latest packages that nx installs as of 01/26/2022

Setup sample repository at https://github.com/DimitriLib/storybook-test if somebody want to try test it.

I have 1 application apps/storybooktest that is used as projectBuildConfig for libs/lib-test
storybooktest has global styles: styles.scss that i want to be able to access in my storybook library component.

I tried the following combinations without success, global styles are not available in lib project:

Executing command: nx storybook lib-test --projectBuildConfig=storybooktest:build-storybook
Updating preview.js with: import '!style-loader!css-loader!postcss-loader!sass-loader!../../../apps/storybooktest/src/styles.scss';
import '../../../apps/storybooktest/src/styles.scss';
This is a simple setup, but on real project my application has dependency from material design theme, ag-grid and other global styles that i want to use when writing/testing library story.

Not sure where is the problem, am i doing something wrong, is it nx setup, storybook setup?

Current Behavior

Current behavior global style is not applied to story that was created for library component.

Expected Behavior

Steps to Reproduce

Clone repository from https://github.com/DimitriLib/storybook-test
Install dependency: npm install
Execute command: nx storybook lib-test --projectBuildConfig=storybooktest:build-storybook
Styles from apps/storybooktest that define on the application are not used in lib-test storybook even command specifies to use projectBuildConfig

This issue may not be prioritized if details are not provided to help us reproduce the issue.

Failure Logs

Environment

[mandarini]

Hi @DimitriLib ! Thanks for filing an issue!
Did you try nx storybook lib-test --projectBuildConfig=storybooktest?

If you try nx storybook lib-test --projectBuildConfig=storybooktest as I suggested, Storybook will use the build target of your storybooktest project. The problem that will appear there is that it will look for the polyfill.ts file in your lib-test project and it will fail.

So, the best thing you can do is to add the styles under the build-storybook and the storybook targets in your storybooktest project.json like this:

apps/storybooktest/project.json file:

    "storybook": {
      ...
      "options": {
         ...
        "projectBuildConfig": "storybooktest",
        "styles": ["apps/storybooktest/src/styles.scss"]
      },
      ...
    },
    "build-storybook": {
      ...
      "options": {
       ...
        "projectBuildConfig": "storybooktest",
        "styles": ["apps/storybooktest/src/styles.scss"]
      },
      ...
    }

Let me know if you have questions! :)

[DimitriLib]

Hi @mandarini,
Thank you for looking into this. I tried what you suggested and added global styles to package.json of the main application, command:

nx storybook lib-test --projectBuildConfig=storybooktest

Gives an error:
ModuleBuildError: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: C:\Users\dimitri.liberman\story-test\storybook\apps\storybooktest\src\polyfills.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at C:\Users\dimitri.liberman\story-test\storybook\node_modules@ngtools\webpack\src\ivy\loader.js:60:26
at processResult (C:\Users\dimitri.liberman\story-test\storybook\node_modules\webpack\lib\NormalModule.js:751:19)
at C:\Users\dimitri.liberman\story-test\storybook\node_modules\webpack\lib\NormalModule.js:853:5
at C:\Users\dimitri.liberman\story-test\storybook\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at C:\Users\dimitri.liberman\story-test\storybook\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (C:\Users\dimitri.liberman\story-test\storybook\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at C:\Users\dimitri.liberman\story-test\storybook\node_modules@ngtools\webpack\src\ivy\loader.js:60:17

      Broken build, fix the error above.
      You may need to refresh the browser.

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

NX Running target "lib-test:storybook" failed

But this command works and global styles are availabel on the lib:
nx storybook lib-test --projectBuildConfig=storybooktest:build-storybook

Thank you again!

[mandarini]

Yep, that's the error I mentioned in my previous comment! :)

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