如何为Vue CLI创建的Vue3项目的Storybook添加SASS支持，解决style-loader报错

错误根因 #

该报错是loader版本与webpack版本不兼容导致：你使用的Storybook 6.3.x、Vue CLI 4默认内置Webpack 4，而你安装的style-loader@3.x、css-loader@6.x仅支持Webpack 5，Webpack 4的loader API不存在getOptions方法，因此触发报错。你当前安装的sass-loader@8.0.2适配Webpack 4，无需改动。

解决步骤 #

1. 降级loader到适配Webpack4的版本 #

先卸载高版本不兼容的loader：

npm uninstall style-loader css-loader
# 若使用yarn则执行：yarn remove style-loader css-loader

安装兼容版本：

npm install style-loader@2.x css-loader@5.x -D
# 若使用yarn则执行：yarn add style-loader@2.x css-loader@5.x -D

2. 修正Storybook配置文件 #

修改.storybook/main.js中的webpackFinal配置，先清除默认的SCSS规则避免冲突，同时补充全局SCSS变量引入配置（解决你代码中$gray-dark等自定义变量识别问题）：

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@etchteam/storybook-addon-css-variables-theme",
  ],

  webpackFinal: async (config, { configType }) => {
    // 移除默认SCSS规则，避免重复加载冲突
    config.module.rules = config.module.rules.filter(rule => !rule.test?.test('.scss'));

    // 配置Vue项目@别名，可选，按自己项目需求添加
    config.resolve.alias['@'] = path.resolve(__dirname, '../src');

    // 新增自定义SCSS处理规则
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader", 
        "css-loader", 
        {
          loader: "sass-loader",
          options: {
            // 此处替换为你项目中全局SCSS变量文件的实际路径
            additionalData: `@import "@/styles/variables.scss";`
          }
        }
      ],
      include: path.resolve(__dirname, "../src"),
    });

    return config;
  },
};

3. 验证生效 #

修改完成后，删除项目根目录的node_modules文件夹、package-lock.json（或yarn.lock）文件，重新执行依赖安装命令，再启动Storybook即可正常加载SCSS样式。

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