为 angular 库设置故事书 SCSS 导入路径

Question

我在 angular 库的根目录下设置了 Storybook。

要配置 SCSS 导入路径，我已将以下内容添加到我的库的 ng-package.json：

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

但是 Storybook 无法从该目录中找到样式表。

如果我在 architect > builder > build > options 故事书下将以下内容添加到根的 angular.json 将正确解析导入，但 angular 构建将失败，因为 angular.json 验证失败：

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

我怎样才能使为库设置的包含路径适用于 Storybook，而不必覆盖默认的 webpack 配置？或者如何在仅添加自定义包含路径的同时保留默认值？

Answer 1

由于Angular必须在angular.json中添加13个样式导入，在your-lib>storybook[=22下=] > 选项 > 样式。不要忘记也将您的样式添加到 build-storybook 架构师。

在你的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"
          ],
          ...
      },
      ...
  
    },
    ...
}

您可以在故事书的 migration-guide 中找到此信息。