How to extract css from multiple components into a single file with vue cli 3?

Question

This is what I have tried in my 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',
    },
  },
};

I'm getting multiple css files in my output dir and I would like to merge/optimise all them into a single file. I have multiple chunks created by dynamic import and am not sure if that's the cause.

In my old webpack template with previous CLI I used extract-text-webpack-plugin for the job and it worked.

I found some discussions in the issues below but at the time of this question no solutions yet.

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

Geothermal