这是我的Webpack配置:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//entries
entry: {
index: './src/js/index.js',
about: './src/js/about.js'
},
//outputs
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].js',
publicPath: './'
},
//loaders
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
}
},
"css-loader",
"sass-loader"
]
}
]
},
//plugins
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: "css/[name].css"
})
],
//common files
optimization: {
splitChunks: {
cacheGroups: {
//common js and css
common: {
name: 'common',
chunks: 'all',
minChunks: 2,
minSize: 0
}
}
}
}
}
index.js导入index.scss
@import 'scss-common.scss';
@import 'demo.css';
.box-1 {
width: 100px;
height: 200px;
background: #F55;
}
about.js导入about.scss
@import 'scss-common.scss';
@import 'demo.css';
.box-2 {
width: 200px;
height: 100px;
background: #1ABC9C;
}
然后,在运行webpack之后,我得到了三个CSS文件:
index.css
/* This is scss-common.scss content */
.center {
display: block;
margin-left: auto;
margin-right: auto; }
.box-1 {
width: 100px;
height: 200px;
background: #F55; }
about.css
/* This is scss-common.scss content */
.center {
display: block;
margin-left: auto;
margin-right: auto; }
.box-2 {
width: 200px;
height: 100px;
background: #1ABC9C; }
/* Only include demo.css */
.demo {
display: block;
}
现在我们可以看到common.css仅包含demo.css, 不包括scss-common.scss,我认为这是一个问题 sass-loader,但是如何解决?如何将scss-common.scss放入common.css文件中?