Global styles in ng 12.2 with version ^6.3

[KrisHaney]

Describe the bug
Storybook ^6.3 with Angular 12.2 does not load global styles when stylesheets are imported from preview.js

To Reproduce
Reproduction:
https://www.chromatic.com/test?appId=6116d0fb97cb10003ce69c94&id=6116da16f8042f003aec800f

Repo:
https://github.com/KrisHaney/sb6.3-ng12.2

System
Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 3.0.0 - ~\AppData\Roaming\npm\yarn.CMD
npm: 7.19.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 92.0.4515.131
Edge: Spartan (44.18362.1593.0)
npmPackages:
@storybook/addon-actions: ^6.4.0-alpha.29 => 6.4.0-alpha.29
@storybook/addon-docs: ^6.4.0-alpha.29 => 6.4.0-alpha.29
@storybook/addon-essentials: ^6.4.0-alpha.29 => 6.4.0-alpha.29
@storybook/addon-links: ^6.4.0-alpha.29 => 6.4.0-alpha.29
@storybook/angular: ^6.4.0-alpha.29 => 6.4.0-alpha.29
@storybook/builder-webpack5: next => 6.4.0-alpha.29
@storybook/manager-webpack5: next => 6.4.0-alpha.29
@storybook/preset-scss: ^1.0.3 => 1.0.3

Additional context
Separate issue references this here: #6364

Downgrading angular to 12.1 fixes the problem

[dkimmich-onventis]

Any sign from the Storybook team? Are you working on it? Is there a workaround?

[JeanMeche]

+1 I'm also looking for a fix / workaround.

[TomWebwalker]

I am using Storybook for maintaining the Angular library. A temporary solution for me was creating an Angular app, using it as a default project, and adding my scss stylesheets inside the styles property in angular.json.

[iessa-pragg-ctct]

Pretty awful hack but I have worked around this at the moment by loading my styles manually.
preview.js

import GlobalStyles from '!sass-loader!./styles.scss';

const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = GlobalStyles;
document.body.appendChild(storybookStyles);

[Marklb]

There are a few issues similar to this for library only projects, but your repo looks to be using an "application". In my opinion you should just load the styles with Angular, because it already has a loader for SCSS configured.

Here are the common solutions that I know of:

1. The best option is probably to use a storybook builder target, but I haven't actually started doing this yet. I think @ThibaudAV has done some work toward this. If I get a chance I will take a look at the progress done on this and add an example if I get it working.

2. Add an "application" project config named "storybook" in your angular.json. You do not need to actually generate the project or any additional files. You would just need to add the project config with a "build" target and set it's tsconfig, styles, and assets properties. This has been my preferred solution, but I plan to move to using a builder soon.

This should be all the config needed if using this solution:

"storybook": {
  "projectType": "application",
  "root": "",
  "sourceRoot": "src",
  "prefix": "app",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "tsConfig": "tsconfig.json",
        "styles": [
			// Add your global stylesheets
        ],
        "scripts": []
      }
    }
  }
}

---

This type of question gets asked periodically on Discord. I always tell them to add the stylesheet in angular.json, which normally works smoothly as intended. Most people that try to use a loader are probably getting that from the documentation, which seems to be using the same description across frameworks, but isn't necessary for Angular and normally just complicates things.

[shilman]

@Marklb is this something that can be improved in our Angular documentation? (cc @jonniebigodes)

[Marklb]

@shilman Yes, I think so. I am just not sure what to change it to right now. There isn't a problem with what it says in the setup about adding styles, but it always just ends up in additional code that has to be dealt with and potentially fixed when updating. Angular already has webpack loaders for a few different CSS syntax and will add the one your project has set. So, unless you are not using the same CSS syntax as your application, another loader isn't necessary.

I haven't really looked into the Angular loaders that have been added to Storybook, so I don't have an example configuring that right now, but I think that is what should be recommended. From what I have seen, the builders may not be fully ready yet, but I could be wrong.

[pfeileon]

@Marklb @shilman

Configuring storybook in a workspace's angular.json also fixes a possible issue with data-urls in sass files. With this method the packages in the root node_modules are used, otherwise the ones in @storybook/angular/node_modules are used. Atm the latter has sass-loader version 10 installed while the one which comes with angular 12 is version 12, for instance. This causes the issue that %23 and %3A are unescaped to # and : in a data-url after the filetype and charset definition. I didn't invest more time in investigating the issue, so there could be other packages involved or at fault.

The documentation should definitely give obvious information that it is possible to do this.

// sample of an actually working configuration
// .storybook/
// projects/
// - demo-app/
// - library/
// angular.json

"storybook": {
      "projectType": "application",
      "root": "",
      "sourceRoot": ".storybook",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "index": "",
            "main": "",
            "outputPath": "",
            "assets": [".storybook/assets"],
            "styles": [".storybook/styles/styles.scss"],
            "tsConfig": ".storybook/tsconfig.json"
          }
        }
      }

[JeanMeche]

I went for this solution too !

[jonniebigodes]

@Marklb or @pfeileon you're willing to add this to our documentation, we'd welcome it. Let me know if you need help on contributing to the documentation or when the pull request and I'm more than glad to follow up with either of you on this.

Thanks for bringing this to our attention.

Stay safe

[dexster]

@angular-devkit/build-angular is the culprit. I have fixed it at 12.1.4 for now. This is not a Storybook bug. The loaders don't work in an Angular project when @angular-devkit/build-angular is 12.2.x

angular/angular-cli#21747

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-rc.9 containing PR #16675 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.