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

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;
  }
}

我正在 Storybook 中导入 SCSS 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"
  }
}

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

Answer 1

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

yarn add -D @storybook/preset-scss

降级依赖项。如果您安装了这些，请删除它们

yarn add -D @storybook/preset-scss

安装这些版本

yarn remove sass-loader style-loader css-loader

如果您的文件如下所示，则 Storybook 应该编译成功。

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',
  ],
};

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