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

For anyone still experiencing this issue, a hacky workaround seems to be manually appending whatever global styles you need in the preview.js:

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

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

For context, this is the preview.js inside an nx monorepo library. I have tried with (no luck) to add styles to the project’s styles array in angular.json, but nothing is ever loaded. This is holding back our upgrade to v.13 so would be useful if there was a fix/better workaround for loading global styles.

Also, fwiw, the migration guide approach isn’t working for my @nrwl/nx based project (which is probably the second most popular way to manage Angular projects at this point). So tried following with nothing landing on the SB rendered pages:

        "storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "libs/ag/.storybook"
            },
            "styles": [
              "libs/ag/styles/common.properties.min.css",
              "libs/ag/styles/common.resets.min.css",
              "libs/ag/styles/common.utilities.min.css"
            ],
            "projectBuildConfig": "ag:build-storybook"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },

I tried the preview hack and the <style> tag isn’t even showing up on the page

import GlobalStyles from '!style-loader!css-loader!../libs/ag/styles/common.min.css';

const storybookStyles = document.createElement('style');
storybookStyles.innerHTML = GlobalStyles;
// document.body.appendChild(storybookStyles);
setTimeout(() => {
  // obviously screwy but was just flailing trying to figure stuff out
  document.body.appendChild(storybookStyles);
}, 5000)

So it doesn’t seem like the Migration guide approach is working for nx monorepo based libraries as also mentioned by @joewIST above:

For context, this is the preview.js inside an nx monorepo library.

Perhaps it’s something to do with "builder": "@nrwl/storybook:storybook", being different then ng one I dunno.

UPDATE: I got it working! For others maybe you’ll run in to this and it’ll help

In you’re angular.json you’ll see two storybook stanzas like:

"storybook": {} "build-storybook": {}

For me these styles didn’t show up until I put them in the build-storybook one. I haven’t dug in, but I’m assuming the first utilizes the later to “build storybook”. The following verbose paste with both you’ll notice I now only have the styles in the build storybook stanza (which IS working):

        "storybook": {
          "builder": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/angular",
            "port": 4400,
            "config": {
              "configFolder": "libs/ag/.storybook"
            },
           /* PUTTING IT HERE DID NOT WORK FOR ME */
            "projectBuildConfig": "ag:build-storybook"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        },
        "build-storybook": {
          "builder": "@nrwl/storybook:build",
          "outputs": ["{options.outputPath}"],
          "options": {
            "uiFramework": "@storybook/angular",
            "outputPath": "dist/storybook/ag",
            "config": {
              "configFolder": "libs/ag/.storybook"
            },
            "styles": [
              "libs/ag/styles/common.properties.min.css",
              "libs/ag/styles/common.resets.min.css",
              "libs/ag/styles/common.utilities.min.css"
            ],
            "projectBuildConfig": "ag:build-storybook"
          },
          "configurations": {
            "ci": {
              "quiet": true
            }
          }
        }

@mandarini never mind. I have figured out.

For anyone having the same issue in the future. Checkout the branch I created in my demo repo

To run the whole storybook, I use a wrapper app to run all stories from each library

https://github.com/maxisam/nx-storybook-demo/tree/sb-app-global-style

To run the individual library.

https://github.com/maxisam/nx-storybook-demo/tree/sb-lib-global-style

I don’t think we need to include styles in the build-storybook config anymore as @roblevintennis comments.

Yeah that’s what got things working for me (and it looks like others). Nothing else wrong that I can think of at the moment (on my phone away from my machine) but perhaps you can document it in an aside note in the upgrade to 13 nx docs. Might help for folks upgrading angular via nx.

Hi there @roblevintennis ! Katerina from Nx team here. Let me understand the issue a bit better. Adding the styles in the build-storybook target makes it work, right? Is there any other issue you’re experiencing using Nx & Storybook & Angular?

I can confirm that the solution of @roblevintennis in the UPDATE section right above here works, also for .scss files.

This is still an issue for me. Global styles and CSS variables are not being picked up at all, nor are any styles pulled from node modules