minicssextractplugin+splitchunksplugin未将作用域css放入捆绑包

我正在使用webpack 4设置,在这里我试图将所有css放入一个包中,包括从.vue文件中获取的范围内的css。我使用minicssextractplugin从文件中提取css,然后splitchunksplugin将所有css打包成一个文件。问题是.vue文件中我的作用域css被放在单独的css文件中。

我的网页包配置:

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)