Angular 13. Global styles no longer work in SB 6.4 (CSS or SCSS)

[ghost]

Describe the bug

1. Clean NG 13 project + SB 6.4.0
2. Added global plain old CSS style as described in https://storybook.js.org/docs/angular/configure/styling-and-css#importing-css-files
3. Result. No global styles applied.

To Reproduce

Attaching a minimal reproduction generated myself as npx sb@next repro fails.
styles_issue_repro.zip

Just run the below to see the reproduction of the issue

npm i && npm run storybook

Expected result

Global styles should apply, i.e.

• All divs must have a red background
• A top div in http://localhost:6006/?path=/story/example-introduction--page must have a blue background

System

macOS Monterey
OS Version 12.0.1
npm 6.14.15
node v14.18.1

Additional context
n/a

[shilman]

preview.js runs in the browser, so process.exit isn't meaningful there

[ghost]

Also to add. The default global styles generated by angular get ignored as well.

1. In my attached project open src/styles.scss
2. Add same CSS as in the sample global CSS from before, i.e.

div {
  background-color: red !important;
}

.test {
  background-color: blue !important;
}

3. Compare storybook vs angular output by running respectively npm run storybook & npm start

Let me know if I can be of any help!

In previous versions I believe styles that were mentioned in the styles & stylePreprocessorOptions sections of angular.json were included into the storybook build automatically ...

[ghost]

While we are waiting for a resolution may be @ThibaudAV could point us in a direction to a potential workaround for this issue? Noticed you are fairly active in this area so thought I'd ping you. Cheers

[ghost]

Found a work-around.

1. Take my attached project
2. Add the following builder into angular.json under test project section

,
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "browserTarget": "test:build:development",
            "port": 6006,
            "compodoc": false,
            "styles": [
              "src/styles.scss"
            ]
          }
        },
        "build-storybook": {
          "builder": "@storybook/angular:build-storybook",
          "options": {
            "browserTarget": "test:build:development",
            "compodoc": false,
            "styles": [
              "src/styles.scss"
            ]
          }
        }

3. Then run storybook as ng run test:storybook
4. You should see global styles applied.

h/t @ThibaudAV for pointers in his repos

Should probably be fixed in the upcoming releases of SB

[ThibaudAV]

yes exactly.

but you don't have to add "styles": ["src/styles.scss"]if you want to add the same as the browserTarget
The styles options in storybook builder is to override all styles form browserTarget

There are still 2 points to do to improve storybook on this subject.

• fix the sb init for angular with this builder
• change the documentation
  For the moment I did not have time to do it yet.

but the idea was to have this workaround quickly to avoid loss of functionality.
I also hope it will make easier the maintenance during angular version upgrades 🤞

[ghost]

@shilman Could you label this issue as "has workaround"? it will help others to stop digging :-)

[avergos29]

hi,

is there a workaround for "global styles" coming from an npm package ? They are ignored as well

[ghost]

hi,

is there a workaround for "global styles" coming from an npm package ? They are ignored as well

You have to add them in angular.json. Refer to angular docs not an SB "issue"

"stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/@lib/common/assets/styles"
              ]
            },

[avergos29]

It cannot be used for a angular library, right ?

[nicolae536]

Any news when this will be fixed ? I tried the workaround and it doesn't seem to work.

[wizardnet972]

preview.scss:

body { border:5px solid red!important; }

preview.js:

import '!style-loader!css-loader!sass-loader!./preview.scss';

Does not work.

I have workspace.json in my nx project (not angular.json and it's not the same because nx is running the storybook not angular/storybook):

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

[nicolae536]

I tracked the issue a bit and it seems for my project I can update to @angular:13 version if you release this fix 3dbfa80
Can you please release this asap ? @ThibaudAV @shilman
This are the versions which I used

 "@storybook/addon-actions": "~6.4.5",
    "@storybook/addon-docs": "~6.4.5",
    "@storybook/addon-essentials": "~6.4.5",
    "@storybook/addon-links": "~6.4.5",
    "@storybook/angular": "~6.5.0-alpha.1",
    "@storybook/builder-webpack5": "~6.4.5",
    "@storybook/manager-webpack5": "~6.4.5",
    ```
and I went and manually changed the log like in this commit and than everything started to work since storybook used my angular.json config.

[shilman]

@nicolae536 released as 6.4.6 ack release failed. trying again.

UPDATE: released as 6.4.7

[ghost]

Thank you.
Issues resolved:

• Styles in Angular project are now included into the SB build and it is working

Issues still to be resolved:

• External static styles, i.e. the original issue when we use

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

[nicolae536]

@shilman

Thanks very much the main issue for me seems to be fixed and everything is back to normal
With 6.4.7

[shilman]

Thanks for your patience everybody! Closing this.

[ghost]

It is not resolved though! External static styles are not loaded as mentioned in my last comment so the original issue is still happening

[ChazUK]

Probably a bit of cross contamination here, but does anyone have a workaround for using this in an nx monorepo?

EDIT: This looks like a suitable solution nrwl/nx#8681