File tree Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Expand file tree Collapse file tree 1 file changed +41
-0
lines changed Original file line number Diff line number Diff line change @@ -76,6 +76,47 @@ The `href` of the `<link>` tag has to match the URL that will be used for loadin
7676The ` data-href ` attribute can be used for ` <link> ` and ` <style> ` too.
7777When 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 >
You can’t perform that action at this time.
0 commit comments