Webpack使用MiniCssExtractPlugin打包多SCSS文件为单个CSS文件配置问题

你的配置存在以下几个明确错误，修复后即可实现预期效果：

• 冲突的loader配置：.scss规则中同时使用了style-loader和MiniCssExtractPlugin.loader，二者功能互斥。style-loader的作用是将样式注入到页面DOM的style标签中，而MiniCssExtractPlugin.loader的作用是将样式提取为独立CSS文件，同时使用会导致提取逻辑失效。
• loader执行顺序错误：webpack的loader执行顺序为从右到左/从后到前，正确的SCSS处理顺序应为：先sass-loader编译SCSS为CSS，再css-loader处理CSS模块、引入等逻辑，最后用MiniCssExtractPlugin.loader提取内容，你当前的scss规则顺序完全颠倒。
• 其他CSS规则未适配提取逻辑：非react-toolbox的CSS处理规则使用了style-loader，这部分样式不会被提取到目标CSS文件中，会直接注入到页面。
• 未全量引入项目SCSS文件：webpack默认只会处理入口文件./src/index.js的依赖链中引入的文件，不会自动扫描项目内所有嵌套的SCSS文件，如果你没有在入口或其依赖中引入所有SCSS，会导致部分文件未被处理。

修正后的完整配置如下：

const path = require('path');
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // 如需自动扫描src下所有嵌套目录的SCSS文件，无需手动逐个引入，可在index.js顶部添加以下代码：
    // require.context('./', true, /\.scss$/);
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true // 可选配置，每次构建自动清空dist目录旧文件
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                include: resolve(__dirname, 'node_modules', 'react-toolbox'),
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            sourceMap: true,
                            importLoaders: 1,
                            localIdentName: '[name]_[local]_[hash:base64:5]'
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                exclude: resolve(__dirname, 'node_modules', 'react-toolbox'),
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
    ],
};

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