Laravel集成Vue项目编译CKEditor5运行npm run dev报错求助

错误原因 #

你当前配置中，将CKEditor专属的loader规则应用到了全局所有SVG和CSS文件上，导致Laravel Mix默认的CSS处理链路和CKEditor的专用处理链路冲突，style-loader输出的JS代码被后续的postcss-loader当成CSS文件解析，从而抛出未知字符的语法错误。

修复步骤 #

1. 修正webpack规则的匹配范围
   打开你的webpack.mix.js文件，找到CKEditor相关的webpack规则配置，把你注释掉的CKEditor专属正则恢复，不要用全局的/\.svg$/和/\.css$/匹配：

mix.webpackConfig({
    plugins: [
        new CKEditorWebpackPlugin({
            language: 'en'
        })
    ],
    module: {
        rules: [
            {
                test: CKERegex.svg, // 恢复为仅匹配CKEditor的SVG图标
                use: [ 'raw-loader' ]
            },
            {
                test: CKERegex.css, // 恢复为仅匹配CKEditor的主题CSS
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            injectType: 'singletonStyleTag',
                            attributes: {
                                'data-cke': true
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: CKEStyles.getPostCssConfig({
                            themeImporter: {
                                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                            },
                            minify: true
                        })
                    },
                ]
            }
        ]
    }
});

2. 确认依赖版本匹配
   如果你用的是Laravel Mix 6版本，确保以下依赖版本符合CKEditor的构建要求，可以直接添加到package.json的devDependencies中：

"@ckeditor/ckeditor5-dev-webpack-plugin": "^30.0.0",
"@ckeditor/ckeditor5-dev-utils": "^30.0.0",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.1",
"postcss-loader": "^4.3.0"

3. 重新安装依赖并编译
   清理之前的缓存和依赖文件后重新构建：

rm -rf node_modules package-lock.json
npm install
npm run dev

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