Angular Storybook - 找不到要导入的样式表

Question

@角度/cli：18.2.0

@storybook/角度：8.2.9

---

我有一个现有的 Angular 组件库，我正在尝试在 Storybook 中设置它。

该库具有跨多个组件使用的共享样式（library/src/styles）。

样式在库的

styleIncludePaths

 中的 

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"
    ]
  }
}

并在组件中导入和使用，如下所示：

@use "palette" as palette;

使用

ng build

成功构建了库，一切都按预期工作。

---

在

angular.json

中，样式也会根据 Storybook docs

添加到库的 Storybook 构建配置中

{
  "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"
            ]
         }
      }
   }
}

但是当使用

npm run storybook --debug-webpack

运行 Storybook 时，我收到以下错误：

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;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

如果我将 Storybook 构建配置中的“样式”路径修改为不存在的路径，我会收到一条错误消息，指出找不到该文件，因此它似乎正在加载文件（当路径正确时） ），但由于某种原因无法导入和使用样式。

有人知道我做错了什么吗？

Answer 1

我认为你在angular.json。

不要将样式文件夹作为“styles”传递，
将其作为“stylePreprocessorOptions.includePaths”传递，如下所示：

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