Vite + Storybook + SCSS：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：答案

【问题标题】：Vite + Storybook + SCSS: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):Vite + Storybook + SCSS：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）：
【发布时间】：2021-10-31 04:27:44
【问题描述】：

我花了 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;
  }
}

我正在将 SCSS 导入 Storybook preview.js SCSS 在 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"
  }
}

非常感谢您对此提供的帮助。谢谢！

【问题讨论】：

标签： node.js reactjs storybook vite

【解决方案1】：

安装@storybook/scss-loader https://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/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

【讨论】：