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

Question

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

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

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

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

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

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

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

Answer 1

由于必须在 angular.json 中添加 Angular 13 样式导入，在your-lib > storybook > options > styles下。不要忘记将您的样式也添加到 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"
          ],
          ...
      },
      ...
  
    },
    ...
}

您可以在故事书的迁移指南中找到此信息。