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

[ghost]

Original bug is not resolved
#16802

NOTE: for those who landed here please refer to the original issue for a workaround. It does work

Attaching updated project to reproduce the issue.

Describe the bug

1. Clean NG 13 project + SB 6.4.8
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 2.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

[ghost]

It does have a workaround as described in the original bug but the issue is still present

[jon9090]

Any news when this will be fixed ? I upgraded my project to v13 and now the global styles are not working.
I can't use storybook because the global styles and I can't revert.

[ghost]

Any news when this will be fixed ? I upgraded my project to v13 and now the global styles are not working. I can't use storybook because the global styles and I can't revert.

Just use a workaround described in the original issue. That's what I am currently doing

[shilman]

@8thblock @jon9090 I added some MIGRATION documentation in #16980. I'm not an Angular person, so I'm not sure all the terminology is correct, but please take a look.

From my conversation with @ThibaudAV, my understanding is that we don't plan to fix the original issue in #16802

Specifically:

• We use Angular's build tools to do this, and they no longer support this in Angular 13 and don't intend to support it in the future.
• The builder-based configuration described in my MIGRATION PR will be the recommended way to configure Angular moving forward. The old way will be backwards compatible until 7.0 with older versions of Angular, but the new way is required for Angular 13 and above.

[ghost]

Thank you for clarifying!

[joewIST]

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

[joewIST]

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.

[dasdany]

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.

Thx @joewIST. Only this way works of me as well.

[roblevintennis]

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

[samvloeberghs]

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

[mandarini]

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?

[roblevintennis]

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.

[Markus-Ende]

Did someone get this to work with css + tailwind? I tried all the proposed solutions here but nothing worked.

[juri-sinitson]

@Markus-Ende
Tailwind works for me.

I did these steps:

1. Install according to the instructions on the official Tailwind website
2. Put a separate file tailwind.scss and put the following content there (@layer utilities is optional of course):

@tailwind base;
@tailwind components;
@tailwind utilities;

// `@apply` doesn't seem to work with custom theme classes
// See also https://tailwindcss.com/docs/functions-and-directives#theme
// and
// https://tailwindcss.com/docs/functions-and-directives#layer
@layer utilities {
  .tw-grid-rows-12 {
    grid-template-rows: theme('gridRowStart.12');
  }
}

3. Everywhere you use tailwind you include the file above first like this if necessary: @use 'libs/shared/ui-common/src/tailwind.scss';

Let me know if need a working example.

[sir-captainmorgan21]

@joewIST what does your storybook.scss look like? This works. It ends up loading the style tag into the iframe. But I just see

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Im guessing we need to build tailwind first?

[sir-captainmorgan21]

Yup that worked. @joewIST solution worked perfectly for us. @Markus-Ende if you are like us, and want to be able to use tailwind classes on you library components, but not import the tailwind css into the build (letting the consuming applications provide the tailwind css), @joewIST solution works. Its important to note though, that you have to build tailwind and import the output css. Importing a "imports" css with the tailwind imports will not work. Preview.js gets run at runtime, not build time, so once in the browser it has no idea what to do with @import syntax. Ill try to lay out what we have going on below for anyone else who stumbles upon this.

.storybook directory inside the library directory

// preview.js
export const parameters = {
  docs: {
    inlineStories: true,
  },
};

import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
setCompodocJson(docJson);

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

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

// tailwind.config.js
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');

module.exports = {
  content: [
    join(__dirname, '../src/**/!(*.spec).{ts,html}'),
    ...createGlobPatternsForDependencies(__dirname)
  ],
  presets: [require('../../style/src/lib/tailwind.config')], // We have a tailwind lib that holds our base config that apps will use, so we extend that
  safelist: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

We added a target in project.json as well:

// project.json
...
"tailwind-storybook-preview": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "command": "npx tailwind build -o tailwind-storybook-preview.scss",
        "cwd": "packages/sirius/button/.storybook"
      }
    }
...

So you'd run...
nx run my-lib:compodoc
nx run my-lib:tailwind-storybook-preview
nx run my-lib:storybook

and your good to go!

@mandarini Any thoughts on building this into the generator or building it into a preset? Its not terrible to implement, but would be nice to be able to get it out of the box. Tailwind + Angular + Storybook is very common

[mandarini]

Hi @sir-captainmorgan21 ! I am very happy you solved your issue and it works now! Also, thanks for the suggestion! I have not worked much with Tailwind, unfortunately, to be able to provide my take on this, or if that would be something worth adding in the generator. I'll try to sync with the team to get a better opinion on this! :) Thank you for trying to improve Nx! :D :D

by the way, I suppose this article here does not help in any way, since it does not include Storybook, right?

[sir-captainmorgan21]

@mandarini absolutely. Glad I could help!

But correct, that article doesn't help much since it doesn't use storybook.

[maxisam]

@mandarini I think something is not working correctly. It was working in 12 tho

Here is the repo: https://github.com/maxisam/nx-storybook-demo

Basically I have a shared-style project, shared-component library project and an app.

Storybook can't build on either app or shared-component library.

npx nx run sb-test:storybook

npx nx run shared-component:storybook

I have the setting like

in app

https://github.com/maxisam/nx-storybook-demo/blob/b3857b45cd4c94587531098749a16c3907b6cc85/apps/sb-test/project.json#L108-L119

in library

https://github.com/maxisam/nx-storybook-demo/blob/b3857b45cd4c94587531098749a16c3907b6cc85/libs/shared-component/project.json#L56-L73

Not sure this is a NX issue or Storybook issue, but I am sure it was working at one point with NX v12
Thanks!

[maxisam]

@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.