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

Thanks for your patience everybody! Closing this.

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

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

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"
            ]
          }
        }

1. Then run storybook as ng run test:storybook
2. You should see global styles applied.

h/t @ThibaudAV for pointers in his repos

Should probably be fixed in the upcoming releases of SB

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';

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 https://github.com/nrwl/nx/issues/8681

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 🤞

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"
              ]
            },

@shilman Could you label this issue as “has workaround”? it will help others to stop digging 😃

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