webpack-4 - 如何使用 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 文件，我想将它们合并/优化到一个文件中。我有多个由动态导入创建的块，但不确定这是否是原因。

在我以前的 CLI 的旧 webpack 模板中，我用于extract-text-webpack-plugin这项工作并且它有效。

我在以下问题中发现了一些讨论，但在提出这个问题时还没有解决方案。

• 迷你 CSS 提取插件 #41
• 迷你 CSS 提取插件 #52

标签： webpack-4vue-climini-css-extract-plugin