Setting storybook SCSS import paths for angular library

Question

I have Storybook set up at the root of an angular library.

To configure the SCSS import paths I have added the following to my library's ng-package.json:

"lib": {
  "styleIncludePaths": ["<some directory>"]
}

However Storybook cannot find stylesheets from that directory.

If I add the following to the root's angular.json under architect > builder > build > options storybook will correctly resolve the import but the angular build will fail because angular.json fails validation:

"stylePreprocessorOptions": {
  "includePaths": ["<some directory>"]
}

How can I make it so the include paths set for the library apply to Storybook, without having to override the default webpack config? Or how can I keep the defaults while only adding the custom include paths?

Answer 1

Since Angular 13 style imports must be added in angular.json, under your-lib > storybook > options > styles. Don't forget to also add your styles to the build-storybook architect.

In your angular.json:

"your-lib": {
  ...
  "storybook": {
      "builder": "@nrwl/storybook:storybook",
      "options": {
          ...
          "projectBuildConfig": "your-lib:build-storybook",
          "styles": [
              "path-to-the-stylesheet/styles.scss",
              "path-to-the-stylesheet/your-theme.scss"
          ],
          ...
      },
      ...
  
    },
    ...
}

You can find this information in the migration-guide of storybook.