我正在遷移一個庫以使用 Angular 和 Material 12（當前版本為 10），并且 Storybook 用于公開該庫的各種組件。為此，我使用 Angular 更新指南將 Angular 和 Material 升級到 12 版，Storybook 升級到 6.3 版，npx sb upgrade并按照此處描述的步驟完全遷移 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了之前安裝的那個，我在 dev 依賴項中添加了sass-loader, css-loader,sass和style-loader我試圖在@storybook/preset-scss沒有自定義 webpack 配置的情況下添加插件，但它沒有用。我也試過這個解決方案，但它也不起作用。
我看到這里，它可能是在版本大于10青菜裝載機的問題，所以我選用了10.1.1版本，但我的印象中，角12進口青菜，裝載機在12版中的devkit依賴會有有沖突嗎？如果是這樣，我不知道如何強制 Angular 12 使用 sass-loader 的 10 版。
我真的很高興有一個可以解決我的問題的線索，因為我覺得我已經嘗試了好幾天了......
謝謝
uj5u.com熱心網友回復：
我已經回答了我的問題。事實上，沒有必要為我的案例更改 webpack 配置。添加@storybook/preset-scss插件就足夠了。
此處描述了該問題。我需要將 Angular 降級到 12.1 版本。我在 12.2。
希望這有助于某人。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/329305.html