webpack编译的CSS文件包含Javascript变量和函数

Question

我们使用一个简单的webpack/mix应用程序:

mix.js('resources/js/app.js', 'public/js')
.js('resources/js/cpg.js', 'public/js')
.js('resources/js/editor.js', 'public/js')
.copy('resources/js/ckeditor/dist', 'public/js/editor')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/cpg.scss', 'public/css')

与webpack.config.js:

module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
// https://webpack.js.org/configuration/entry-context/
entry: './resources/js/editor.js',
// https://webpack.js.org/configuration/output/
output: {
path: path.resolve(__dirname, 'public/js/editor'),
filename: 'editor.js'
},
module: {
rules: [
{
test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/,
use: ['raw-loader']
},
{
test: /ckeditor5-[^/\]+[/\]theme[/\].+.css$/,
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
})
}
]
}
]
},
// Useful for debugging.
devtool: 'source-map',
// By default webpack logs warnings if the bundle is bigger than 200kb.
performance: { hints: false }
}

在添加ckeditor之前，我们没有任何麻烦。但是现在ckeditor已经添加，下面的JS现在出现在我们编译的cpg.css文件中:

function webpackContext(req) {
var id = webpackContextResolve(req);
return __webpack_require__(id);
}
function webpackContextResolve(req) {
if(!__webpack_require__.o(map, req)) {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
}
return map[req];
}
webpackContext.keys = function webpackContextKeys() {
return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./node_modules/moment/locale sync recursive ^\.\/.*$";

显然，这是一个问题。JS代码不属于CSS文件，它绊倒了我们的SonarCloud质量门(有充分的理由)，所以我们不能部署任何编译过的东西，除非我们手动编辑编译过的文件。这在很大程度上违背了拥有它们的目的。

进一步的背景故事:我们项目中使用CKEditor的部分是由承包商完成的。所以，在我们发现编译文件不合适之前，所有这些都被合并到我们的项目中。承包商已经不在公司了，所以我试着自己调试，但一无所获。Webpack将JS代码放在CSS文件中似乎是一个非常罕见的错误。

进度更新:删除ckeditor引用没有影响。Webpack现在似乎坏了。全面的node_modules重新安装没有效果。只是坏了。

Issue似乎是https://github.com/laravel-mix/laravel-mix/issues/1976的副本。升级到Mix 6给我的项目带来了大量的问题，所以这个问题将无法解决。

按照下面的说明:https://github.com/laravel-mix/laravel-mix/issues/2633#issuecomment-802023077我能够解决这个问题。

Answer 1

可能与此有关https://github.com/ckeditor/ckeditor5/issues/8112这里的解决方案建议进行以下更改

use: [
{
loader: 'style-loader',
options: {
injectType: 'singletonStyleTag',
attributes: {
'data-cke': true
}
}
},
'css-loader', // added this line
{
loader: 'postcss-loader',
options: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
}
]