Storybook 中不再加载全局 SCSS 样式 Angular 12

Question

我正在迁移一个库以使用 Angular 和 Material 12（当前版本为 10），Storybook 用于公开该库的各种组件。为此，我使用 Angular 更新指南将 Angular 和 Material 升级到版本 12，使用 npx sb upgrade 将 Storybook 升级到版本 6.3，然后按照 here 中描述的步骤进行操作] 完全迁移 Storybook 并使用 webpack5.

不幸的是，以前在故事渲染中全局包含的 base.scss 文件不再包含（故事现在没有任何 CSS）。此 base.scss 文件包含在一个 Typescript 文件中：

import '!style-loader!css-loader!sass-loader!./base.scss';

使用 Storybook 6.3 和 Angular 10，一切正常。

为了解决这个问题，我尝试在 main.js 中添加此配置，如文档中所述：

webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  }

但是我的每个故事都出现了这个错误：

SassError: SassError: expected "{".
  ╷
1 │ import api from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                  ^
  ╵
  src\stories\utils\trademarks-format\example-utils-trademarks-format.component.scss 1:98  root stylesheet
    at Object.callback (D:\bmx\node_modules\@angular-devkit\build-angular\node_modules\sass-loader\dist\index.js:54:16)
    at Worker.<anonymous> (D:\bmx\node_modules\@angular-devkit\build-angular\src\sass\sass-service.js:134:25)
    at Worker.emit (events.js:400:28)
    at MessagePort.<anonymous> (internal/worker.js:236:53)
    at MessagePort.[nodejs.internal.kHybridDispatch] (internal/event_target.js:399:24)
    at MessagePort.exports.emitMessage (internal/per_context/messageport.js:18:26)

我删除了之前安装的 node-sass，我在开发依赖项中添加了 sass-loader、css-loader、sass 和 style-loader，我尝试了在没有自定义 webpack 配置的情况下添加 @storybook/preset-scss 插件，但它没有用。我也试过this solution，但也没用。

我看到 here 这可能是 sass-loader 版本大于 10 的问题所以我选择了 10.1.1 版本但我的印象是 devkit 依赖Angular 12 imports sass-loader in its version 12. 那里会有冲突吗？ 如果是这样，我不知道如何强制 Angular 12 使用 sass-loader.

版本 10

我真的很高兴有一个线索可以解决我的问题，因为我已经好几天没试过一切了...

谢谢

Answer 1

我已经回答了我的问题。事实上，没有必要为我的案例更改 webpack 配置。添加 @storybook/preset-scss 插件就足够了。

问题已描述 here。我需要 将 Angular 降级到 12.1 版本 。我在 12.2.

希望这对某人有所帮助。

Answer 2

在最新版本的 Angular (13) 中，有一种更简单的方法可以将全局样式添加到故事书中。只需将样式表添加到 angular.json 中的 storybook-architekt，在 your-project > [=21= 下](build-)storybook > options > styles.

由于不再支持在 .storybook/main.js 中导入样式表，您可以将其删除并添加如下所示的样式表。

angular.json:

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

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

Storybook 中不再加载全局 SCSS 样式 Angular 12

Global SCSS style is no longer loaded in Storybook with Angular 12

sass

webpack

storybook

angular12