Extracting CSS files into single separate file

[Mighty683]

What problem does this feature solve?

Build example application by vue create with Router enabled.
Add any styles to About component.

Or checkout my repo:
https://github.com/Mighty683/vue-cli-repro-css-extract

Run: npm run build

I tried method described in webpack documentation:
https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file

vue.conf.js:

module.exports = {
  lintOnSave: true,
  configureWebpack: {
    optimization: {
      splitChunks: {
        cacheGroups: {
          default: false,
          // Merge all the CSS into one file
          styles: {
            name: 'styles',
            test: /\.(le|c|sc|sa)ss$/,
            chunks: 'all',
            enforce: true,
          },
        },
      },
    },
  },

  chainWebpack (config) {
    config.optimization.delete('splitChunks')
  }
};

Build create separate css file for each js chunk. This is causing performance dropdown if there are many small CSS files. I found no solution to prevent spliting CSS files.

dist/js/app.1bbd0c33.js                 114.89 KiB        40.48 KiB
  dist/js/chunk-28241050.d0f60add.js      0.56 KiB          0.36 KiB
  dist/css/app.14ef6e61.css               0.42 KiB          0.26 KiB
  dist/css/chunk-28241050.ebe5cd62.css    0.02 KiB          0.04 KiB

What does the proposed API look like?

Add option to vue-cli to extract single file from CSS or add posibility to configure it by user.

[Mighty683]

Seems to be connected with overall problem:
webpack-contrib/mini-css-extract-plugin#113

[Mighty683]

Creating cache group like this will solve problem, but still create redudant JS file.

styles: {
     name: 'styles',
     test: m => m.constructor.name === 'CssModule',
     chunks: 'all',
     minChunks: 1,
     enforce: true
}

[pascencio]

Creating cache group like this will solve problem, but still create redudant JS file.

styles: {
     name: 'styles',
     test: m => m.constructor.name === 'CssModule',
     chunks: 'all',
     minChunks: 1,
     enforce: true
}

This works perfectly. I have a doubt ...How can I change the final css name?