如何解决Storybook启动时SCSS文件报ModuleParseError的问题

问题原因 #

你项目根目录的Webpack配置仅作用于项目本身的构建流程，Storybook运行时使用独立的内置Webpack配置，未包含SCSS文件对应的处理loader，因此解析非空SCSS文件时会抛出解析错误。空SCSS文件不需要解析语法内容，因此不会触发loader检测，不会出现报错。

解决方案 #

提供两种可行方案，二选一即可：

方案1：使用SCSS预设（推荐，配置更简单） #

1. 首先安装依赖（项目中已存在对应依赖可跳过）：

npm install -D sass sass-loader css-loader style-loader @storybook/preset-scss

2. 修改.storybook/main.js的addons配置，加入SCSS预设：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-scss" // 新增该行
  ]
}

方案2：手动扩展Storybook的Webpack配置 #

如果你需要自定义SCSS处理规则，可以直接在.storybook/main.js中添加webpackFinal配置项，手动注入SCSS loader规则：

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)",
    "../src/**/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  // 新增以下webpack配置扩展
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      exclude: /node_modules/,
      use: ["style-loader", "css-loader", "sass-loader"],
    });
    return config;
  }
}

配置完成后务必重启Storybook服务，新配置才会生效

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