如何使用vue cli 3将多个组件中的CSS提取到单个文件中？

Question

这是我在我的尝试vue.config.js：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
  },
  css: {
    sourceMap: devMode,
    extract: {
      filename: 'main.css',
    },
  },
};

我的输出目录中有多个css文件，我想将所有css文件合并/优化到一个文件中。我有通过动态导入创建的多个块，不确定是否是原因。

在具有以前的CLI的旧webpack模板中，我使用extract-text-webpack-plugin了该工作，并且该工作正常。

我在以下问题中找到了一些讨论，但在提出此问题时尚无解决方案。

• mini-css-extract-plugin＃41
• mini-css-extract-plugin＃52