Laravel Mix编译Sass后浏览器开发者工具出现重复CSS问题

根因说明 #

• 多个React组件重复引入同一份Sass文件，Laravel Mix默认无样式去重逻辑，每份引入的Sass都会被独立编译输出，导致同一条CSS规则重复出现
• 现有配置缺少CSS合并压缩插件，且PurgeCSS路径配置错误，无法清理重复、无效的样式规则

解决步骤 #

1. 调整样式引入规范 #

• 拆分样式文件类型：全局公共样式、工具类Sass（变量、mixin、函数，无实际CSS输出）、组件私有样式
• 全局公共样式仅在入口文件resources/website/index.js中引入一次，组件内禁止重复引入全局样式
• 工具类Sass使用@use/@forward语法引入，替换原有的@import语法，避免重复编译

2. 新增CSS去重插件 #

首先安装依赖：

npm install css-minimizer-webpack-plugin --save-dev

更新Laravel Mix配置文件，完整配置如下：

const mix = require('laravel-mix');
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

//-- Website Mix --
mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
});

mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    stats: {
        warnings: false,
    },
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin({
                minimizerOptions: {
                    preset: [
                        'default',
                        { mergeRules: true }
                    ]
                }
            })
        ]
    },
    output: {
        chunkFilename: 'website/js/chunks/[chunkhash].js',
    },
    resolve: {
        alias: {
            '@fonts': path.resolve(__dirname, 'resources/website/styles/fonts'),
            '@images': path.resolve(__dirname, 'resources/website/images')
        }
    },
    plugins: [
        new PurgeCSSPlugin({
            paths: glob.sync(path.join(__dirname, 'resources/website/**/*.{js,jsx}'),  { nodir: true }),
            safelist: {
                standard: [] // 可填写需要保留的类名规则，避免PurgeCSS误删
            }
        })
    ]
});

mix.options({
    postCss: [
        require('autoprefixer'),
    ],
    fileLoaderDirs:  {
        fonts: 'website/fonts',
        images: 'website/images'
    }
});

mix.js('resources/website/index.js', 'public/website/js').react();
mix.version();
//-- Website Mix End --

3. 重新编译验证 #

执行npm run production触发生产环境编译，完成后打开浏览器开发者工具查看，重复的@media规则和.side-double类样式会被合并为单条。 #

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