No global style in Storybook with Angular 12

[dtslvr]

Current Behavior

The global style is not applied in Storybook.

It has been added in preview.js as follows:

import '!style-loader!css-loader!sass-loader!../../../apps/client/src/styles.scss';

Expected Behavior

The global style gets applied to each Storybook story.

Steps to Reproduce

1. Clone https://github.com/ghostfolio/ghostfolio
2. Install dependencies: yarn install
3. Start Storybook: yarn start:storybook
4. Open http://localhost:4400/?path=/story/value--currency
5. E.g. d-flex (utility class from Bootstrap) is not applied

Environment

  Node : 16.6.2
  OS   : darwin x64
  yarn : 1.22.5

  nx : 12.9.0
  @nrwl/angular : 12.8.0
  @nrwl/cli : 12.8.0
  @nrwl/cypress : 12.8.0
  @nrwl/devkit : 12.8.0
  @nrwl/eslint-plugin-nx : 12.8.0
  @nrwl/jest : 12.8.0
  @nrwl/linter : 12.8.0
  @nrwl/nest : 12.8.0
  @nrwl/node : 12.8.0
  @nrwl/tao : 12.8.0
  @nrwl/workspace : 12.8.0
  @nrwl/storybook : 12.9.0
  typescript : 4.3.5

[jakobwarrer]

I am experiencing the exact same issue.

[jansievers]

Same for me.

[vprothais]

Same here. Found this workaround : https://github.com/storybookjs/storybook/issues/15855 but only works for apps, not for libs.

[jakobwarrer]

We downgraded @angular-devkit/build-angular from 12.2.x to 12.1.4 and it started working again

[innoveltec]

I am also having the same issue. I got around for now by creating a wrapper component decorator for my stories which is having the needed scss files in the styleUrls array property.

[maxisam]

https://github.com/storybookjs/storybook/pull/15744

I think this will be fixed in storybook 6.4 🤞

[LucasDshg]

We downgraded @angular-devkit/build-angular from 12.2.x to 12.1.4 and it started working again

After some hours this work for me. Using webpack 5 with Lib Angular 12 and storybook 6.4-beta.1

[innoveltec]

I have also tried using storybook 6.4-beta.1. It required having a property buildStoriesJson: true set in your main.ts which generates a stories.json file when doing a build of your storybook project. My build is working but when I run the storybook i am getting a message my storybook is empty. Inspecting the generated stories.json file in my dist is giving me the following => {"v":3,"stories":{}} Anyone an idea how to make this work?

[mandarini]

Hi all! Thanks for filing this issue. From the comments I understand that this can be solved (and will be solved) on the Storybook side, hence the label I just added (third-party).

However, please also try this with the latest version of Nx, since we now use webpack5, which I see plays some part in this.

[oburakevych]

@mandarini @hjalmers Is there a fix coming? From the PR it seems they simply downgraded @angular-devkit/build-angular to version 12.1.4. If so, it's not a viable solution: https://github.com/sebgroup/green/pull/228/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L60

Also, it seems Angular team has refused to fix it in @angular-devkit/build-angular @alan-agius4 https://github.com/angular/angular-cli/issues/21747 There should be a way to load .scss global styles in Storybook, otherwise - it's quite useless.

[ozknemoy]

i removed import '!style-loader!css-loader!sass-loader!./styles.scss' and add './styles.scss' to angular.json new project 'only-needed-for-style-injection':

"projects": {
    "only-needed-for-style-injection": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "tsConfig": "tsconfig.json",
            "styles": [
              "./styles/primeng.css",
              "./styles/themes/luna-blue/theme.css",
              "./styles/primeicons/primeicons.css",
              "./controls/common/zyfra-theme/lib/default.css",
              "./controls/common/zyfra-theme/lib/styles.less",
              "./controls/common/zyfra-resource/src/lib/fonts/common.less"
            ],
            "scripts": []
          }
        }
      }
    },
     ...
 }

and apply patch to styles loader for fixing source map https://stackoverflow.com/a/69754973/6372326

[juristr]

Closing this as it is a Storybook related issue that should have been addressed in this Storybook PR: https://github.com/storybookjs/storybook/pull/15744

The latest Nx version already upgrades you to the 6.4.0-rc.3 which should have this fix included. There have been other issues with that version that have been addressed by Storybook 6.4.5, so you might want to upgrade. There's an automated migration coming also, if you prefer to wait. See #7917

[itayod]

Hi @juristr is seems like storybook added a global style option to @storybook/angular:start-storybook could you please add that to @nrwl/storybook:storybook?

[mandarini]

Hi there @itayod! Can you please take a look at this comment here, and that issue in general, and let me know if it works for you? Linking the styles under the build-storybook target should work, but let me know if it does not. Also, please take a look at our updated projectBuildConfig for Storybook+Angular documentation.

[itayod]

Hi @mandarini thanks for your comment :) it seems to be working fine after adding the styles to build-storybook, anyway I think you should still update it in the schema.json

[mandarini]

Hi @itayod ! Thank you for your recommendation and I'm very happy it works for you. What would your suggestion be, regarding updating our schema.json?

[itayod]

you should update the styles like storybook's schema.json take a look here

it isn't the best docs but it might give other developers a hint about this property :)

[mandarini]

Ah I see! I will look into this, thank you!

[Sjeiti]

Hi there @itayod! Can you please take a look at this comment here

That didn't work entirely but did point me in the right direction to configure styles in two places:

nx storybook ... uses projects.[project].architect.storybook.options.styles

nx e2e ... uses projects.[project].architect.build-storybook.options.styles

(it's a pity that an import in preview.js never worked; angular.json is the wrong place for this imho)

[junekpavel]

Hey you all! I spend an eternity trying to fix this issue.

In my case, the problem was that the targets (storybook and build-storybook) were generated (by nx) with wrong configuration.

I generated it via the nx g @nrwl/angular:storybook-configuration my-lib command, and the generated targets looked like this. Notice the projectBuildConfig:

  "storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/angular",
        "port": 4400,
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "projectBuildConfig": "my-lib"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/angular",
        "outputPath": "dist/storybook/my/lib",
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "projectBuildConfig": "ui-tables"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }

I had to manually update the projectBuildConfig option to look like this - "projectBuildConfig": "my-lib:build-storybook".

Now my complete configuration looks like this:

"storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/angular",
        "port": 4400,
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "projectBuildConfig": "my-lib:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/angular",
        "outputPath": "dist/storybook/my-lib",
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "styles": [
          "./libs/xxx/yyy/assets/styles/shared.scss"
        ],
        "projectBuildConfig": "my-lib:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }

Everything works as expected now.

Using @nrwl/storybook : 13.8.2.

---

Update: For more context, not sure if it's relevant or not, but the library I was adding storybook configuration into, is buildable - it already had the build target (with the @nrwl/angular:ng-packagr-lite executor) when I was generating the storybook configuration.

[mandarini]

Ahhhh thank you @junekpavel ! I think we need to update the documentation to make it clearer. Here is the current status on the documentation for this issue you were having.

[github-actions[bot]]

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.