私は Webpack 4 セットアップを使用しています。ここでは、.vue ファイルからのスコープ css を含め、すべての css を 1 つのバンドルにまとめようとしています。MiniCssExtractPlugin を使用してファイルから CSS を抽出し、SplitChunksPlugin を使用してすべての CSS を 1 つのファイルにバンドルしています。問題は、.vue ファイルからのスコープ css が別の css ファイルに入れられていることです。
私のwebpack構成:
optimization: {
splitChunks: {
cacheGroups: {
common: {
test: /[\\/]node_modules[\\/].*\.js$/,
name: 'common',
chunks: 'all'
},
styles: {
test: /\.css$/,
filename: '[name]-[contenthash].css',
chunks: 'all',
enforce: true
}
}
}
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
exclude: /node_modules/,
use: 'eslint-loader'
},
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 3,
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
indentedSyntax: true
}
}
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new PurifyCSSPlugin({
paths: glob.sync([
path.join(__dirname, 'templates/**/*.html'),
path.join(__dirname, 'assets/js/**/*.js'),
path.join(__dirname, 'assets/js/**/*.vue')
]),
purifyOptions: {
info: true,
minify: true,
rejected: true
}
})
],
resolve: {
alias: {
jquery: 'jquery/src/jquery',
'vue': 'vue/dist/vue.js'
},
extensions: ['.js', '.vue', '.json', '.sass']
}
出力:
scoped-css-from-a-vue-file.03371a6565c9f56951dd.css // (172 bytes)
main-css-bundle-from-sass-files.af5152091d41a56d9bdd.css // (303 KiB)