Skip to content

Commit 9b1bd63

Browse files
Pierre-Doevilebottnawi
authored andcommitted
docs: add documentation in README.md about how to extract all CSS in one file (#60)
1 parent 2456895 commit 9b1bd63

File tree

1 file changed

+41
-0
lines changed

1 file changed

+41
-0
lines changed

README.md

+41
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,47 @@ The `href` of the `<link>` tag has to match the URL that will be used for loadin
7676
The `data-href` attribute can be used for `<link>` and `<style>` too.
7777
When inlining CSS `data-href` must be used.
7878

79+
#### Extracting all CSS in a single file
80+
81+
Similar to what [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) does, the CSS
82+
can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
83+
84+
**webpack.config.js**
85+
86+
```js
87+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
88+
module.exports = {
89+
optimization: {
90+
splitChunks: {
91+
cacheGroups: {
92+
styles: {
93+
name: 'styles',
94+
test: /\.css$/,
95+
chunks: 'all',
96+
enforce: true
97+
}
98+
}
99+
}
100+
},
101+
plugins: [
102+
new MiniCssExtractPlugin({
103+
filename: "[name].css",
104+
})
105+
],
106+
module: {
107+
rules: [
108+
{
109+
test: /\.css$/,
110+
use: [
111+
MiniCssExtractPlugin.loader,
112+
"css-loader"
113+
]
114+
}
115+
]
116+
}
117+
}
118+
```
119+
79120
<h2 align="center">Maintainers</h2>
80121

81122
<table>

0 commit comments

Comments
 (0)