Mini-css-extract-plugin: how can i combine all the css of all chunks into a file?

[zzzgit]

I'm using code splitting

After compiled by webpack, there will be a CSS file for every chunk

Is there a way to combine all of them into one file?

[JohnnyFun]

Is this what you're after?
https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file

[happylindz]

Is that a way to extract css in a single file without creating a new styles.js js file?

[alexander-akait]

Documented in docs

[joshleecreates]

The solution in the documentation is not working for me.

[ovaldi]

The solution in the documentation is not working for me.

[ZiaUrR3hman]

Documented in docs

Guys you need provide CSS entry point or import CSS in JS file that is already added to entry point...

```javascript

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: {
"css": "./src/assets/css/style.css", // OR import "./assets/css/style.css" in client.js file
"client": "./src/client.js"
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /.css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};```

[wintercounter]

Neither for me, I end having dosens of CSS files.