Webpack集成sass-loader与mini-css-extract-plugin构建报错求助

核心问题 #

你在module.rules里同时配置了MiniCssExtractPlugin.loader和style-loader，这两个loader功能冲突：

• style-loader的作用是将编译后的样式注入到浏览器的<style>标签，运行时依赖浏览器的document对象
• MiniCssExtractPlugin.loader的作用是将样式提取为独立的CSS文件，在Node环境下构建时没有document对象，两者同时存在就会触发document is not defined错误

修复后的webpack.config.js #

修改规则，移除style-loader，并确保loader顺序正确（webpack从右到左执行loader，顺序为sass-loader -> css-loader -> MiniCssExtractPlugin.loader）：

const path = require('path');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


const config = {
    entry: [
        './src/js/index.js',
        './src/sass/index.scss'
    ],
    output: {
        filename: 'js/main.[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
            template: path.resolve(__dirname, 'src/html/index.template.html'),
        }),
        new WebpackManifestPlugin(),
        new MiniCssExtractPlugin({
            filename: "css/main.[contenthash].css"
        })
    ],
    module: {
        rules: [
            {
                test: /\.(css|scss)$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
    mode: process.env.NODE_ENV,
};

if (config.mode == 'production') {
    config.optimization = {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
        ]
    }
}

module.exports = config;

额外优化（可选） #

如果需要在开发环境保留热更新功能（用style-loader），生产环境提取CSS，可以分环境配置loader：

// ...其他配置不变
module: {
    rules: [
        {
            test: /\.(css|scss)$/i,
            use: [
                config.mode === 'production' ? MiniCssExtractPlugin.loader : "style-loader",
                "css-loader",
                "sass-loader",
            ],
        },
    ],
},
// ...其他配置不变

验证 #

修改后重新执行npm run build，就能正常生成独立的CSS文件，且不会再出现document is not defined错误。

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