Search code examples
angularstorybook

Angular Storybook - Can't find stylesheet to import

@angular/cli: 18.2.0

@storybook/angular: 8.2.9

I have an existing Angular component library that i'm trying to set up in Storybook.

The library has shared styles (library/src/styles) that are used across multiple components.

enter image description here

The styles are defined in styleIncludePaths within the library's ng-package.json

{
  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../dist/efclass-ui",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": [
      "src/styles"
    ]
  }
}

And are imported and used within components as follows:

@use "palette" as palette;

The library builds successfully using ng build and everything works as expected.

Within the angular.json the styles are also added to the library's Storybook build config as per the Storybook docs

{
  "projects": {
    "my-lib": {
      "projectType": "library",
      "root": "library",
      "sourceRoot": "library/src",
      "prefix": "lib",
      "architect": {
        "build": {...},
        "test": {...},
        "storybook": {
          "builder": "@storybook/angular:start-storybook",
          "options": {
            "configDir": "library/.storybook",
            "browserTarget": "my-lib:build",
            "compodoc": true,
            "compodocArgs": [
              "-e",
              "json",
              "-d",
              "library",
              "--minimal",
              "--disablePrivate",
              "--disableInternal",
              "--disableSourceCode",
              "--disableLifeCycleHooks"
            ],
            "port": 6006,
            "styles": [
              "library/src/styles"
            ]
         }
      }
   }
}

But when running Storybook using npm run storybook --debug-webpack i get the following error:

ERROR in ./library/src/lib/components/my.component.scss?ngResource
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @use "palette" as palette;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

If i modify the "styles" path in the Storybook build config to something that doesn't exist, i get an error saying it can't find the file, so it appears to be loading the file ok (when the path is correct), but for some reason it's unable to then import and use the styles.

Does anyone have an idea what i'm doing wrong?

Solution

  • I think your issue is in angular.json.

    Instead of passing the styles folder as "styles",
    pass it as "stylePreprocessorOptions.includePaths" like this:

    "build-storybook": {
  "builder": "@storybook/angular:build-storybook",
  "options": {
    ...
    "stylePreprocessorOptions": {
      "includePaths": ["library/src/styles"]
    }
  }
}

    Another issue I had was upgrading from previous Storybook version.
    For styles, I had a custom webpack sass-loader.
    After @storybook/angular 7, this is no longer required.
    Documentation: https://storybook.js.org/recipes/sass#1-add-storybookaddon-styling-webpack