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

Question

我正在将一个库迁移到使用Angular和Material 12(目前是版本10)，而Storybook被用来公开这个库的各种组件。为此，我使用Angular更新指南将Angular和Material升级到12版本，使用npx sb upgrade将Storybook升级到6.3版本，并按照这里描述的步骤完全迁移Storybook并使用webpack5。

不幸的是，base.scss以前全局包含在故事呈现中的文件不再包含(故事现在没有任何CSS)。这个基地。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";
│                                                                                                  ^
╵
srcstoriesutilstrademarks-formatexample-utils-trademarks-format.component.scss 1:98  root stylesheet
at Object.callback (D:bmxnode_modules@angular-devkitbuild-angularnode_modulessass-loaderdistindex.js:54:16)
at Worker.<anonymous> (D:[e-mail]: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插件，但它不起作用。我也试过这个解决方案，但它也不起作用。

我在这里看到sass-loader在版本大于10时可能会出现问题，所以我选择了10.1.1版本，但我的印象是，Angular 12的devkit依赖在其版本12中导入了sass-loader。会有冲突吗?如果是这样，我不知道如何强制Angular 12使用sass-loader的10版。

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

谢谢

Answer 1

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

问题描述在这里。我需要把Angular降级到12.1版本． 我在12.2。

希望这能帮助到一些人。

Answer 2

在最新版本的Angular(13)中，有一种更简单的方法可以将全局样式添加到故事书中。只需将样式表添加到storybook-architekt在你的角度。. json，在你的项目比;(构建)故事书比;项>比;.

由于不再支持在.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"
],
...
},
...

},
...
}

您可以在storybook的迁移指南中找到这些信息。