Vite + Storybook配置下引入SCSS报sass-loader模块构建失败如何解决

核心问题说明 #

你当前的配置存在两个核心问题：

1. Storybook 6.3 默认使用 Webpack 进行构建，你在webpackFinal中新增SCSS规则时，没有排除 Storybook 默认自带的CSS处理规则，导致规则冲突
2. 依赖版本不兼容：你安装的sass-loader@12要求css-loader版本 >=5.0.0，你当前使用的css-loader@3.6.0版本过低，同时css-loader、style-loader属于构建依赖，错误放置在了dependencies中

解决方案 #

方案1：修复现有Webpack配置 #

1. 升级匹配版本的依赖，将构建依赖移到正确位置，执行安装命令：

npm install css-loader@6 style-loader@3 -D
npm uninstall css-loader style-loader -S

2. 修改.storybook/main.js的webpackFinal配置，先排除默认CSS规则对SCSS文件的处理：

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) => {
    // 排除默认规则对scss文件的处理
    config.module.rules.forEach(rule => {
      if (rule.test.toString().includes('css')) {
        rule.exclude = /\.scss$/
      }
    })
    // 新增自定义scss处理规则
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../src'),
    });
    return config;
  }
}

3. 删除项目根目录的node_modules文件夹、package-lock.json文件，重新执行npm install后启动Storybook即可。

方案2：切换为Vite构建器（更适配Vite项目，推荐） #

该方案无需配置Webpack规则，和你现有Vite项目的构建逻辑完全一致：

1. 安装Vite构建器依赖：

npm install @storybook/builder-vite -D

2. 替换.storybook/main.js配置，删除原有的webpackFinal字段，新增构建器指定：

const path = require('path');
module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  core: {
    builder: "@storybook/builder-vite"
  }
}

3. 直接启动Storybook即可，preview.js中的SCSS引入无需修改。

内容的提问来源于stack exchange，提问作者DorinV