Webpack 5（v5.37.0）编译SCSS文件报错：无对应Loader处理文件类型的调试求助

首先咱们来定位核心问题：你的Webpack配置里，module.rules只匹配带.module.s(a|c)ss后缀的SCSS文件，但你的style.scss是普通SCSS文件（没有.module前缀），所以Webpack找不到对应的Loader处理它，这就是报错的根源。

接下来一步步修正配置：

1. 调整Loader规则的匹配范围 #

如果不需要CSS Modules功能，可以直接修改现有规则去掉.module的限制；如果需要同时支持普通SCSS和CSS Modules，就拆分为两个规则。这里给出兼顾两种场景的配置方案。

2. 修复sass-loader的配置错误 #

你当前sass-loader的options写法有误，require("sass")需要放在implementation字段下，Webpack才能正确识别并使用dart-sass作为编译引擎。

3. 确认依赖已完整安装 #

确保你已经安装了所有必需的依赖包：

npm install --save-dev mini-css-extract-plugin css-loader sass-loader sass

修正后的完整webpack.config.js #

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      // 处理普通SCSS文件（不带.module后缀）
      {
        test: /\.s(a|c)ss$/,
        exclude: /\.module\.s(a|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"), // 正确指定dart-sass实现
            },
          },
        ],
      },
      // 处理CSS Modules风格的SCSS文件（带.module后缀）
      {
        test: /\.module\.s(a|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              modules: true, // 启用CSS Modules
            },
          },
          {
            loader: "sass-loader",
            options: {
              implementation: require("sass"),
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isDevelopment ? '[name].css' : '[name].[hash].css',
      chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
    })
  ],
};

额外说明 #

• 如果你不需要CSS Modules功能，可以直接合并规则，去掉.module相关的匹配和排除逻辑，进一步简化配置。
• 开发环境下如果希望CSS热更新而非生成独立文件，可以把MiniCssExtractPlugin.loader换成style-loader，但按照你的需求生成独立CSS文件，当前配置完全适用。

现在重新运行npx webpack，应该就能成功把SCSS编译为独立的CSS文件了！

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