MiniCssExtractPlugin + SplitChunksPlugin不会将范围内的CSS放入包中

Question

我正在使用Webpack 4设置，试图将所有css放入一个捆绑包中，包括从.vue文件中确定范围的css。我正在使用MiniCssExtractPlugin从文件中提取CSS，并使用SplitChunksPlugin将所有CSS捆绑到一个文件中。问题是我的.vue文件中的作用域CSS被放入单独的CSS文件中。

我的webpack配置：

csvReader.Context.HeaderRecord[index]

输出：

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']
}