Webpack 5 正确转译SCSS文件且不处理CSS文件的配置方案

你遇到的问题核心有两点：

1. 当前对不需要编译的CSS文件使用了css-loader+MiniCssExtractPlugin的处理链路，不仅会解析修改CSS内容不符合「原封不动输出」的要求，还和SCSS的处理链路共用了插件实例，导致规则耦合。
2. 开发环境直接使用MiniCssExtractPlugin.loader会影响CSS/SCSS的热重载能力。

以下是修改后的完整配置，完全满足你的需求：

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");

// 判断是否为开发环境
const isDev = process.env.NODE_ENV === 'development';

module.exports = {
    target: 'web',
    entry: {
        // 仅保留需要预编译的SCSS作为入口，其他JS入口可继续补充在此
        preprocess: './src/css/preprocess.scss',
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].min.js',
        clean: true // 可选，每次构建自动清理dist目录旧文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // 排除需要跳过编译的原生CSS文件，避免被该规则处理
                exclude: [/node_modules/, path.resolve(__dirname, './src/css/skippreprocessing.css')],
                use: [
                    // 开发环境用style-loader保证热重载正常，生产环境才抽离单独CSS文件
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ],
            }
        ]
    },
    plugins: [
        // 仅生产环境启用MiniCssExtractPlugin
        ...(isDev ? [] : [new MiniCssExtractPlugin({
            filename: '[name].css',
        })]),
        // 直接复制不需要编译的CSS到dist目录，全程不修改文件内容
        new CopyPlugin({
            patterns: [
                { from: "./src/css/skippreprocessing.css", to: "[name][ext]" }
            ],
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            minify: false,
        }),
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, './dist'),
            // 监听静态资源变化，修改原生CSS时会自动触发页面更新
            watch: true
        },
        hot: true,
        port: 8080,
    },
};

配套操作说明 #

1. 先安装新增依赖：npm install copy-webpack-plugin --save-dev
2. 在src/index.html中手动引入不需要编译的CSS文件即可：

<link rel="stylesheet" href="skippreprocessing.css">

3. 建议在package.json的scripts中配置环境变量，避免开发/生产环境配置混乱：

"scripts": {
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack build"
}

Windows系统如果运行报错可以安装cross-env包处理环境变量兼容问题。

该配置下两条处理链路完全独立：

• SCSS文件走完整的编译、抽离（生产环境）流程，开发环境热重载功能正常
• 原生CSS文件直接复制输出，全程不经过编译处理，修改也会触发热更新

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