我正在尝试使用Webpack从SCSS文件构建CSS文件。看似随机,输出CSS文件包含正确的css样式,但它们后面是一串以/ ****** /开头的行,以及看起来是内部webpack代码的行。有时,我能够成功完成构建,但是随后又重新构建-不做任何更改-输出再次中断。
我已包含文件要点。
https://gist.github.com/lancemonotone/cb1f98e9545875b30592d4d53e9f7c97
webpack.config.js
// Return array of configurations
module.exports = function () {
return exportModules( [css] );
};
// Config for SCSS files
const css = {
entry: {
'frontend.css': `${__dirname}/src/scss/frontend.scss`
},
output: {
path: `${__dirname}/css`,
filename: '[name]'
},
module: {
rules: [
{
test: /\.scss$/,
exclude: /node_modules/,
// module chain executes from last to first
use: [
{
loader: 'file-loader',
options: { name: '[name].css', outputPath: '../css/' }
},
{ loader: "remove-comments-loader" },
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{ loader: 'resolve-url-loader' },
{ loader: 'sass-loader' },
]
},
]
}
};
/**
* Merge filetype configs with shared config and return them as an array of objects.
* @param objs
* @return {Array}
*/
const exportModules = ( objs ) => {
const objArr = [];
for ( let i = 0; i < objs.length; i++ ) {
objArr.push( {
...config(),
...objs[i]
} );
}
return objArr;
};
// Shared config options
const config = function () {
return {
mode: 'production',
stats: {
colors: true,
children: false
}
}
};
输出CSS文件内容的截断示例:
.some-style{foo: bar;}re__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }