Vite + Storybook + SCSS:模块构建失败(from ./node_modules/sass-load

Question

我花了4-5个小时才使SCSS与Vite + Storybook设置一起工作，我需要你的帮助。当我尝试启动Storybook时，我得到以下错误消息:

ERROR in ./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):

故事书main.js

const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
}
}

我正在导入故事书preview.js中的SCSSSCSS在Vite中工作良好，但在Storybook中无法加载。

...
import '../src/styles/main.scss'
...

最后是package.json

{
"name": "X",
"version": "0.0.0",
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"css-loader": "^3.6.0",
"history": "^4.10.1",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"sass-loader": "^12.1.0",
"style-loader": "^1.3.0",
"styled-components": "^5.3.1"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@storybook/addon-actions": "^6.3.7",
"@storybook/addon-docs": "^6.3.7",
"@storybook/addon-essentials": "^6.3.7",
"@storybook/addon-links": "^6.3.7",
"@storybook/react": "^6.3.7",
"@vitejs/plugin-react-refresh": "^1.3.1",
"babel-loader": "^8.2.2",
"sass": "^1.35.2",
"vite": "^2.4.3"
}
}

非常感谢您的帮助。谢谢!

Answer 1

安装@storybook/scss-loaderhttps://www.npmjs.com/package/@storybook preset-scss

yarn add -D @storybook/preset-scss

降级依赖性。如果你已经安装了这些，请删除它们

yarn remove sass-loader style-loader css-loader

安装这些版本

yarn add -D sass-loader@10.1.1 style-loader@2.0.0 css-loader@5.2.6

如果你的文件是这样的，那么storybook应该可以成功编译。

// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/preset-scss',
],
};

package.json
...
"devDependencies": {
"@storybook/addon-actions": "^6.3.6",
"@storybook/addon-essentials": "^6.3.6",
"@storybook/addon-links": "^6.3.6",
"@storybook/html": "^6.3.6",
"@storybook/preset-scss": "^1.0.3",
"css-loader": "5.2.6",
"sass-loader": "10",
"style-loader": "2.0.0",
},
...

https://github.com/storybookjs/presets/issues/195 issuecomment - 887733786