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

Posted 2023-02-19

【中文标题】使用 Angular 12 的 Storybook 中不再加载全局 SCSS 样式

【英文标题】：Global SCSS style is no longer loaded in Storybook with Angular 12

【发布时间】：2021-12-03 16:24:07

【问题描述】：

我正在迁移一个库以使用 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，一切正常。

为了解决这个问题，我尝试在 ma​​in.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 可能是版本大于 10 的 sass-loader 的问题，所以我选择了 10.1.1 版本，但我的印象是 Angular 12 的 devkit 依赖项在其版本 12。会有冲突吗？如果是这样，我不知道如何强制 Angular 12 使用 sass-loader 的版本 10。

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

谢谢

【参考方案1】：

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

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

希望这对某人有所帮助。