Webpack5加载SCSS报错：Module parse failed遇意外字符'@'

核心问题分析 #

1. Loader执行顺序错误：Webpack的loader按数组从右到左的顺序执行，你的配置里MiniCssExtractPlugin.loader放在数组最后，导致SCSS文件未被编译就被处理，触发Unexpected character '@'错误。
2. 输出文件名冲突：当调整MiniCssExtractPlugin.loader到正确位置后，原配置中output.filename和MiniCssExtractPlugin.filename都设为[name].css，Webpack会同时生成入口对应的JS文件和提取的CSS文件，因重名导致崩溃。

修正后的配置 #

{
    target: 'web',
    stats: {
        errorDetails: true
    },
    entry: ScssEntryGenerator.generateStaticEntryPoint(),
    output: {
        filename: '[name].js', // 修改此处，避免与CSS文件名冲突
        path: path.resolve(__dirname)
    },
    module: {
        rules: [
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPlugin.loader, // 移至数组最前，最后执行CSS提取操作
                    'css-loader',
                    {
                        loader: 'resolve-url-loader',
                        options: {
                            sourceMap: true // 需配合sass-loader的sourceMap使用
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true // 必须开启，resolve-url-loader依赖该配置
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
};

关键说明 #

• Loader顺序：正确顺序为MiniCssExtractPlugin.loader → css-loader → resolve-url-loader → sass-loader，确保SCSS先被编译为CSS，再依次完成解析、路径处理和提取操作。
• 文件名冲突解决：将output.filename改为[name].js，避免生成的空JS文件（因入口为SCSS无JS逻辑）与CSS文件重名，后续可使用clean-webpack-plugin自动清理这类无用JS文件。
• SourceMap配置：resolve-url-loader和sass-loader的sourceMap需同时开启，否则resolve-url-loader无法正确处理资源路径。

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