Laravel Mix集成CKEditor后编译CSS混入JS代码如何解决

• 核心是旧版本Laravel Mix（v5及更早）的自定义webpack配置合并逻辑存在缺陷，对应已知issue#1976：Mix合并用户自定义loader规则时，未做规则范围隔离，导致自定义loader和Mix内置的sass/css loader匹配逻辑重叠。
• 你为CKEditor添加的css处理规则（使用style-loader、postcss-loader）没有指定排除.scss文件范围，也没有限定仅作用于CKEditor依赖目录，当编译sass文件时，冲突的loader规则会错误将JS模块的编译逻辑注入到css输出流中。
• 你看到的moment locale相关JS代码，是项目中引入的模块包含动态require逻辑，loader匹配错乱时，这段处理动态引入的runtime代码被错误写入了css产物。
• 移除CKEditor引用后问题仍存在，是因为冲突的loader规则还在全局webpack配置中，只要规则重叠的问题没有解决，编译错乱就会复现。

注：方案1是最推荐的最小改法，对现有业务逻辑影响最小

方案1：修正CKEditor loader规则的作用范围 #

给自定义的CKEditor相关loader规则添加enforce: 'pre'属性、限定仅匹配node_modules内的CKEditor依赖、排除项目自身的sass文件目录，避免和Mix内置loader冲突。修改后的规则示例：

module: {
    rules: [
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
            include: /node_modules/,
            exclude: /resources\/sass/,
            enforce: 'pre',
            use: ['raw-loader']
        },
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
            include: /node_modules/,
            exclude: /resources\/sass/,
            enforce: 'pre',
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'singletonStyleTag',
                        attributes: {
                            'data-cke': true
                        }
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: styles.getPostCssConfig({
                        themeImporter: {
                            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                        },
                        minify: true
                    })
                }
            ]
        }
    ]
}

方案2：拆分CKEditor编译流程 #

将CKEditor的编译和项目常规资源编译完全隔离，不要共享同一个webpack配置：

1. 单独写一个webpack配置文件仅用于编译CKEditor，输出到指定目录
2. 修改package.json的构建脚本，先执行CKEditor的独立编译，再执行原有的Laravel Mix构建命令，两套编译流程完全独立，不存在规则冲突可能。

方案3：忽略moment动态locale引入 #

你看到的注入到css中的JS代码是moment多语言动态加载的runtime逻辑，如果你项目不需要moment的多语言切换能力，可以在webpack配置中添加IgnorePlugin直接忽略该部分代码，从源头避免错误注入：

const webpack = require('webpack');
module.exports = {
    // 原有配置不变
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
}

方案4：覆盖Mix内置sass loader规则 #

在webpack.mix.js中调整Mix内置的sass处理规则，给其添加CKEditor相关路径的排除逻辑，避免和自定义loader抢资源处理：

mix.override(config => {
    config.module.rules.forEach(rule => {
        if (rule.test.toString().includes('scss') || rule.test.toString().includes('sass')) {
            rule.exclude = rule.exclude || [];
            rule.exclude.push(/ckeditor5-/);
        }
    })
})

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