No global style in Storybook with Angular 12

Current Behavior

The global style is not applied in Storybook.

It has been added in preview.js as follows:

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

Expected Behavior

The global style gets applied to each Storybook story.

Steps to Reproduce

1. Clone https://github.com/ghostfolio/ghostfolio
2. Install dependencies: yarn install
3. Start Storybook: yarn start:storybook
4. Open http://localhost:4400/?path=/story/value--currency
5. E.g. d-flex (utility class from Bootstrap) is not applied

Environment

  Node : 16.6.2
  OS   : darwin x64
  yarn : 1.22.5
  
  nx : 12.9.0
  @nrwl/angular : 12.8.0
  @nrwl/cli : 12.8.0
  @nrwl/cypress : 12.8.0
  @nrwl/devkit : 12.8.0
  @nrwl/eslint-plugin-nx : 12.8.0
  @nrwl/jest : 12.8.0
  @nrwl/linter : 12.8.0
  @nrwl/nest : 12.8.0
  @nrwl/node : 12.8.0
  @nrwl/tao : 12.8.0
  @nrwl/workspace : 12.8.0
  @nrwl/storybook : 12.9.0
  typescript : 4.3.5

[Sjeiti]

Hi there @itayod! Can you please take a look at this comment here

That didn’t work entirely but did point me in the right direction to configure styles in two places:

nx storybook ... uses projects.[project].architect.storybook.options.styles

nx e2e ... uses projects.[project].architect.build-storybook.options.styles

(it’s a pity that an import in preview.js never worked; angular.json is the wrong place for this imho)

[junekpavel]

Hey you all! I spend an eternity trying to fix this issue.

In my case, the problem was that the targets (storybook and build-storybook) were generated (by nx) with wrong configuration.

I generated it via the nx g @nrwl/angular:storybook-configuration my-lib command, and the generated targets looked like this. Notice the projectBuildConfig:

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

I had to manually update the projectBuildConfig option to look like this - "projectBuildConfig": "my-lib:build-storybook".

Now my complete configuration looks like this:

"storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/angular",
        "port": 4400,
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "projectBuildConfig": "my-lib:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/angular",
        "outputPath": "dist/storybook/my-lib",
        "config": {
          "configFolder": "libs/my/lib/.storybook"
        },
        "styles": [
          "./libs/xxx/yyy/assets/styles/shared.scss"
        ],
        "projectBuildConfig": "my-lib:build-storybook"
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }

Everything works as expected now.

Using @nrwl/storybook : 13.8.2.

---

Update: For more context, not sure if it’s relevant or not, but the library I was adding storybook configuration into, is buildable - it already had the build target (with the @nrwl/angular:ng-packagr-lite executor) when I was generating the storybook configuration.