Webpack配置sass-loader加载SCSS文件失败，请求技术指导

你遇到的报错翻译为：

你可能需要合适的加载器来处理该文件类型，当前没有配置任何加载器来处理此文件

结合你已有的CSS模块化配置，问题大概率出在SCSS规则未与原有CSS规则共存，或者缺少模块化SCSS的匹配规则。以下是具体的解决步骤：

1. 确认依赖安装状态 #

虽然你已经执行了安装命令，但可以再次确认版本兼容性（Webpack 5建议搭配sass-loader@10+、sass@1.32+）：

npm install sass-loader sass webpack --save-dev

2. 修改Webpack配置：保留原有CSS规则，新增SCSS规则 #

不要替换原有CSS配置，而是在module.rules中新增SCSS相关规则，同时区分模块化和普通SCSS文件（和你现有的CSS配置逻辑保持一致）：

module.exports = {
  // 其他Webpack配置（entry、output等）
  module: {
    rules: [
      // 原有模块化CSS规则
      {
        test: /\.module\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
        ],
      },
      // 原有普通CSS规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /\.module\.css$/,
      },
      // 新增模块化SCSS/SASS规则
      {
        test: /\.module\.s[ac]ss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1, // 确保@import的SCSS文件先经过sass-loader处理
              modules: true,
            },
          },
          "sass-loader", // 编译SCSS为CSS
        ],
      },
      // 新增普通SCSS/SASS规则
      {
        test: /\.s[ac]ss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
        exclude: /\.module\.s[ac]ss$/i,
      },
    ],
  },
};

3. 关键注意事项 #

• 规则执行逻辑：Webpack从数组末尾开始匹配规则，这里通过扩展名正则区分CSS和SCSS，不会出现规则冲突。
• importLoaders配置：模块化SCSS的css-loader中importLoaders设为1，是为了让@import引入的SCSS文件也能经过sass-loader编译，避免样式缺失。
• 扩展名匹配：/\.s[ac]ss$/i可同时匹配.scss和.sass文件，且不区分大小写。

4. 额外排查方向 #

• 确认导入的SCSS文件扩展名正确（比如是.scss而非.css）。
• 检查Webpack配置文件名是否为webpack.config.js，如果是自定义名称，需在打包命令中指定：npx webpack --config 你的配置文件名.js。
• 清理缓存：执行npx webpack --clean删除旧打包产物，或删除node_modules/.cache目录后重新打包。

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