source: trip-planner-front/node_modules/mini-css-extract-plugin/README.md@ fa375fe

Last change on this file since fa375fe was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 26.0 KB
Line 
1<div align="center">
2 <img width="200" height="200" src="https://cdn.worldvectorlogo.com/logos/logo-javascript.svg">
3 <a href="https://webpack.js.org/">
4 <img width="200" height="200" vspace="" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
5 </a>
6 <h1>mini-css-extract-plugin</h1>
7</div>
8
9[![npm][npm]][npm-url]
10[![node][node]][node-url]
11[![deps][deps]][deps-url]
12[![tests][tests]][tests-url]
13[![coverage][cover]][cover-url]
14[![chat][chat]][chat-url]
15[![size][size]][size-url]
16
17# mini-css-extract-plugin
18
19This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
20
21It builds on top of a new webpack v5 feature and requires webpack 5 to work.
22
23Compared to the extract-text-webpack-plugin:
24
25- Async loading
26- No duplicate compilation (performance)
27- Easier to use
28- Specific to CSS
29
30## Getting Started
31
32To begin, you'll need to install `mini-css-extract-plugin`:
33
34```bash
35npm install --save-dev mini-css-extract-plugin
36```
37
38It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
39
40Then add the loader and the plugin to your `webpack` config. For example:
41
42**style.css**
43
44```css
45body {
46 background: green;
47}
48```
49
50**component.js**
51
52```js
53import "./style.css";
54```
55
56**webpack.config.js**
57
58```js
59const MiniCssExtractPlugin = require("mini-css-extract-plugin");
60
61module.exports = {
62 plugins: [new MiniCssExtractPlugin()],
63 module: {
64 rules: [
65 {
66 test: /\.css$/i,
67 use: [MiniCssExtractPlugin.loader, "css-loader"],
68 },
69 ],
70 },
71};
72```
73
74## Options
75
76### Plugin Options
77
78| Name | Type | Default | Description |
79| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------- |
80| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
81| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
82| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
83| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `<link>` at the given position |
84| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag |
85| **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
86| **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
87
88#### `filename`
89
90Type: `String|Function`
91Default: `[name].css`
92
93This option determines the name of each output CSS file.
94
95Works like [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename)
96
97#### `chunkFilename`
98
99Type: `String|Function`
100Default: `based on filename`
101
102> i Specifying `chunkFilename` as a `function` is only available in webpack@5
103
104This option determines the name of non-entry chunk files.
105
106Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename)
107
108#### `ignoreOrder`
109
110Type: `Boolean`
111Default: `false`
112
113Remove Order Warnings.
114See [examples](#remove-order-warnings) below for details.
115
116#### `insert`
117
118Type: `String|Function`
119Default: `document.head.appendChild(linkTag);`
120
121By default, the `mini-css-extract-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
122
123However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements insertion.
124For example this is the case when you asynchronously load styles for an application that runs inside of an iframe.
125In such cases `insert` can be configured to be a function or a custom selector.
126
127If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
128
129##### `String`
130
131Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
132A new `<link>` element will be inserted after the found item.
133
134**webpack.config.js**
135
136```js
137new MiniCssExtractPlugin({
138 insert: "#some-element",
139});
140```
141
142A new `<link>` element will be inserted after the element with id `some-element`.
143
144##### `Function`
145
146Allows to override default behavior and insert styles at any position.
147
148> ⚠ Do not forget that this code will run in the browser alongside your application. Since not all browsers support latest ECMA features like `let`, `const`, `arrow function expression` and etc we recommend you to use only ECMA 5 features and syntax.
149
150> > ⚠ The `insert` function is serialized to string and passed to the plugin. This means that it won't have access to the scope of the webpack configuration module.
151
152**webpack.config.js**
153
154```js
155new MiniCssExtractPlugin({
156 insert: function (linkTag) {
157 var reference = document.querySelector("#some-element");
158 if (reference) {
159 reference.parentNode.insertBefore(linkTag, reference);
160 }
161 },
162});
163```
164
165A new `<link>` element will be inserted before the element with id `some-element`.
166
167#### `attributes`
168
169Type: `Object`
170Default: `{}`
171
172If defined, the `mini-css-extract-plugin` will attach given attributes with their values on `<link>` element.
173
174**webpack.config.js**
175
176```js
177const MiniCssExtractPlugin = require("mini-css-extract-plugin");
178
179module.exports = {
180 plugins: [
181 new MiniCssExtractPlugin({
182 attributes: {
183 id: "target",
184 "data-target": "example",
185 },
186 }),
187 ],
188 module: {
189 rules: [
190 {
191 test: /\.css$/i,
192 use: [MiniCssExtractPlugin.loader, "css-loader"],
193 },
194 ],
195 },
196};
197```
198
199Note: It's only applied to dynamically loaded css chunks, if you want to modify link attributes inside html file, please using [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
200
201#### `linkType`
202
203Type: `String|Boolean`
204Default: `text/css`
205
206This option allows loading asynchronous chunks with a custom link type, such as `<link type="text/css" ...>`.
207
208##### `String`
209
210Possible values: `text/css`
211
212**webpack.config.js**
213
214```js
215const MiniCssExtractPlugin = require("mini-css-extract-plugin");
216
217module.exports = {
218 plugins: [
219 new MiniCssExtractPlugin({
220 linkType: "text/css",
221 }),
222 ],
223 module: {
224 rules: [
225 {
226 test: /\.css$/i,
227 use: [MiniCssExtractPlugin.loader, "css-loader"],
228 },
229 ],
230 },
231};
232```
233
234##### `Boolean`
235
236`false` disables the link `type` attribute
237
238**webpack.config.js**
239
240```js
241const MiniCssExtractPlugin = require("mini-css-extract-plugin");
242
243module.exports = {
244 plugins: [
245 new MiniCssExtractPlugin({
246 linkType: false,
247 }),
248 ],
249 module: {
250 rules: [
251 {
252 test: /\.css$/i,
253 use: [MiniCssExtractPlugin.loader, "css-loader"],
254 },
255 ],
256 },
257};
258```
259
260#### `experimentalUseImportModule`
261
262Use an experimental webpack API to execute modules instead of child compilers.
263
264This improves performance and memory usage a lot, but isn't as stable as the normal approach.
265
266When combined with `experiments.layers`, this adds a `layer` option to the loader options to specify the layer of the css execution.
267
268You need to have at least webpack 5.33.2.
269
270**webpack.config.js**
271
272```js
273const MiniCssExtractPlugin = require("mini-css-extract-plugin");
274
275module.exports = {
276 plugins: [
277 new MiniCssExtractPlugin({
278 experimentalUseImportModule: true,
279 }),
280 ],
281 module: {
282 rules: [
283 {
284 test: /\.css$/i,
285 use: [MiniCssExtractPlugin.loader, "css-loader"],
286 },
287 ],
288 },
289};
290```
291
292### Loader Options
293
294| Name | Type | Default | Description |
295| :-----------------------------: | :------------------: | :--------------------------------: | :-------------------------------------------------------------------------------- |
296| **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
297| **[`emit`](#emit)** | `{Boolean}` | `true` | If false, the plugin will extract the CSS but **will not** emit the file |
298| **[`esModule`](#esModule)** | `{Boolean}` | `true` | Use ES modules syntax |
299
300#### `publicPath`
301
302Type: `String|Function`
303Default: the `publicPath` in `webpackOptions.output`
304
305Specifies a custom public path for the external resources like images, files, etc inside `CSS`.
306Works like [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath)
307
308##### `String`
309
310**webpack.config.js**
311
312```js
313const MiniCssExtractPlugin = require("mini-css-extract-plugin");
314
315module.exports = {
316 plugins: [
317 new MiniCssExtractPlugin({
318 // Options similar to the same options in webpackOptions.output
319 // both options are optional
320 filename: "[name].css",
321 chunkFilename: "[id].css",
322 }),
323 ],
324 module: {
325 rules: [
326 {
327 test: /\.css$/,
328 use: [
329 {
330 loader: MiniCssExtractPlugin.loader,
331 options: {
332 publicPath: "/public/path/to/",
333 },
334 },
335 "css-loader",
336 ],
337 },
338 ],
339 },
340};
341```
342
343##### `Function`
344
345**webpack.config.js**
346
347```js
348const MiniCssExtractPlugin = require("mini-css-extract-plugin");
349
350module.exports = {
351 plugins: [
352 new MiniCssExtractPlugin({
353 // Options similar to the same options in webpackOptions.output
354 // both options are optional
355 filename: "[name].css",
356 chunkFilename: "[id].css",
357 }),
358 ],
359 module: {
360 rules: [
361 {
362 test: /\.css$/,
363 use: [
364 {
365 loader: MiniCssExtractPlugin.loader,
366 options: {
367 publicPath: (resourcePath, context) => {
368 return path.relative(path.dirname(resourcePath), context) + "/";
369 },
370 },
371 },
372 "css-loader",
373 ],
374 },
375 ],
376 },
377};
378```
379
380#### `emit`
381
382Type: `Boolean`
383Default: `true`
384
385If true, emits a file (writes a file to the filesystem). If false, the plugin will extract the CSS but **will not** emit the file.
386It is often useful to disable this option for server-side packages.
387
388#### `esModule`
389
390Type: `Boolean`
391Default: `true`
392
393By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax.
394There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
395
396You can enable a CommonJS syntax using:
397
398**webpack.config.js**
399
400```js
401const MiniCssExtractPlugin = require("mini-css-extract-plugin");
402
403module.exports = {
404 plugins: [new MiniCssExtractPlugin()],
405 module: {
406 rules: [
407 {
408 test: /\.css$/i,
409 use: [
410 {
411 loader: MiniCssExtractPlugin.loader,
412 options: {
413 esModule: false,
414 },
415 },
416 "css-loader",
417 ],
418 },
419 ],
420 },
421};
422```
423
424## Examples
425
426### Recommend
427
428For `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
429This can be achieved by using the `mini-css-extract-plugin`, because it creates separate css files.
430For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
431
432> i Do not use together `style-loader` and `mini-css-extract-plugin`.
433
434**webpack.config.js**
435
436```js
437const MiniCssExtractPlugin = require("mini-css-extract-plugin");
438const devMode = process.env.NODE_ENV !== "production";
439
440module.exports = {
441 module: {
442 rules: [
443 {
444 test: /\.(sa|sc|c)ss$/,
445 use: [
446 devMode ? "style-loader" : MiniCssExtractPlugin.loader,
447 "css-loader",
448 "postcss-loader",
449 "sass-loader",
450 ],
451 },
452 ],
453 },
454 plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
455};
456```
457
458### Minimal example
459
460**webpack.config.js**
461
462```js
463const MiniCssExtractPlugin = require("mini-css-extract-plugin");
464
465module.exports = {
466 plugins: [
467 new MiniCssExtractPlugin({
468 // Options similar to the same options in webpackOptions.output
469 // all options are optional
470 filename: "[name].css",
471 chunkFilename: "[id].css",
472 ignoreOrder: false, // Enable to remove warnings about conflicting order
473 }),
474 ],
475 module: {
476 rules: [
477 {
478 test: /\.css$/,
479 use: [
480 {
481 loader: MiniCssExtractPlugin.loader,
482 options: {
483 // you can specify a publicPath here
484 // by default it uses publicPath in webpackOptions.output
485 publicPath: "../",
486 },
487 },
488 "css-loader",
489 ],
490 },
491 ],
492 },
493};
494```
495
496### Named export for CSS Modules
497
498> ⚠ Names of locals are converted to `camelCase`.
499
500> ⚠ It is not allowed to use JavaScript reserved words in css class names.
501
502> ⚠ Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
503
504**styles.css**
505
506```css
507.foo-baz {
508 color: red;
509}
510.bar {
511 color: blue;
512}
513```
514
515**index.js**
516
517```js
518import { fooBaz, bar } from "./styles.css";
519
520console.log(fooBaz, bar);
521```
522
523You can enable a ES module named export using:
524
525**webpack.config.js**
526
527```js
528const MiniCssExtractPlugin = require("mini-css-extract-plugin");
529
530module.exports = {
531 plugins: [new MiniCssExtractPlugin()],
532 module: {
533 rules: [
534 {
535 test: /\.css$/,
536 use: [
537 {
538 loader: MiniCssExtractPlugin.loader,
539 },
540 {
541 loader: "css-loader",
542 options: {
543 esModule: true,
544 modules: {
545 namedExport: true,
546 localIdentName: "foo__[name]__[local]",
547 },
548 },
549 },
550 ],
551 },
552 ],
553 },
554};
555```
556
557### The `publicPath` option as function
558
559**webpack.config.js**
560
561```js
562const MiniCssExtractPlugin = require("mini-css-extract-plugin");
563
564module.exports = {
565 plugins: [
566 new MiniCssExtractPlugin({
567 // Options similar to the same options in webpackOptions.output
568 // both options are optional
569 filename: "[name].css",
570 chunkFilename: "[id].css",
571 }),
572 ],
573 module: {
574 rules: [
575 {
576 test: /\.css$/,
577 use: [
578 {
579 loader: MiniCssExtractPlugin.loader,
580 options: {
581 publicPath: (resourcePath, context) => {
582 // publicPath is the relative path of the resource to the context
583 // e.g. for ./css/admin/main.css the publicPath will be ../../
584 // while for ./css/main.css the publicPath will be ../
585 return path.relative(path.dirname(resourcePath), context) + "/";
586 },
587 },
588 },
589 "css-loader",
590 ],
591 },
592 ],
593 },
594};
595```
596
597### Advanced configuration example
598
599This plugin should not be used with `style-loader` in the loaders chain.
600
601Here is an example to have both HMR in `development` and your styles extracted in a file for `production` builds.
602
603(Loaders options left out for clarity, adapt accordingly to your needs.)
604
605You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
606`webpack-dev-server` enables / disables HMR using `hot` option.
607
608**webpack.config.js**
609
610```js
611const webpack = require("webpack");
612const MiniCssExtractPlugin = require("mini-css-extract-plugin");
613const devMode = process.env.NODE_ENV !== "production";
614
615const plugins = [
616 new MiniCssExtractPlugin({
617 // Options similar to the same options in webpackOptions.output
618 // both options are optional
619 filename: devMode ? "[name].css" : "[name].[contenthash].css",
620 chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
621 }),
622];
623if (devMode) {
624 // only enable hot in development
625 plugins.push(new webpack.HotModuleReplacementPlugin());
626}
627
628module.exports = {
629 plugins,
630 module: {
631 rules: [
632 {
633 test: /\.(sa|sc|c)ss$/,
634 use: [
635 MiniCssExtractPlugin.loader,
636 "css-loader",
637 "postcss-loader",
638 "sass-loader",
639 ],
640 },
641 ],
642 },
643};
644```
645
646### Hot Module Reloading (HMR)
647
648Note: HMR is automatically supported in webpack 5. No need to configure it. Skip the following:
649
650The `mini-css-extract-plugin` supports hot reloading of actual css files in development.
651Some options are provided to enable HMR of both standard stylesheets and locally scoped CSS or CSS modules.
652Below is an example configuration of mini-css for HMR use with CSS modules.
653
654You should not use `HotModuleReplacementPlugin` plugin if you are using a `webpack-dev-server`.
655`webpack-dev-server` enables / disables HMR using `hot` option.
656
657**webpack.config.js**
658
659```js
660const webpack = require("webpack");
661const MiniCssExtractPlugin = require("mini-css-extract-plugin");
662
663const plugins = [
664 new MiniCssExtractPlugin({
665 // Options similar to the same options in webpackOptions.output
666 // both options are optional
667 filename: devMode ? "[name].css" : "[name].[contenthash].css",
668 chunkFilename: devMode ? "[id].css" : "[id].[contenthash].css",
669 }),
670];
671if (devMode) {
672 // only enable hot in development
673 plugins.push(new webpack.HotModuleReplacementPlugin());
674}
675
676module.exports = {
677 plugins,
678 module: {
679 rules: [
680 {
681 test: /\.css$/,
682 use: [
683 {
684 loader: MiniCssExtractPlugin.loader,
685 options: {},
686 },
687 "css-loader",
688 ],
689 },
690 ],
691 },
692};
693```
694
695### Minimizing For Production
696
697To minify the output, use a plugin like [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin).
698
699**webpack.config.js**
700
701```js
702const MiniCssExtractPlugin = require("mini-css-extract-plugin");
703const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
704
705module.exports = {
706 plugins: [
707 new MiniCssExtractPlugin({
708 filename: "[name].css",
709 chunkFilename: "[id].css",
710 }),
711 ],
712 module: {
713 rules: [
714 {
715 test: /\.css$/,
716 use: [MiniCssExtractPlugin.loader, "css-loader"],
717 },
718 ],
719 },
720 optimization: {
721 minimizer: [
722 // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
723 // `...`,
724 new CssMinimizerPlugin(),
725 ],
726 },
727};
728```
729
730This will enable CSS optimization only in production mode. If you want to run it also in development set the `optimization.minimize` option to true.
731
732### Using preloaded or inlined CSS
733
734The runtime code detects already added CSS via `<link>` or `<style>` tag.
735This can be useful when injecting CSS on server-side for Server-Side-Rendering.
736The `href` of the `<link>` tag has to match the URL that will be used for loading the CSS chunk.
737The `data-href` attribute can be used for `<link>` and `<style>` too.
738When inlining CSS `data-href` must be used.
739
740### Extracting all CSS in a single file
741
742The CSS can be extracted in one CSS file using `optimization.splitChunks.cacheGroups`.
743
744**webpack.config.js**
745
746```js
747const MiniCssExtractPlugin = require("mini-css-extract-plugin");
748
749module.exports = {
750 optimization: {
751 splitChunks: {
752 cacheGroups: {
753 styles: {
754 name: "styles",
755 type: "css/mini-extract",
756 // For webpack@4
757 // test: /\.css$/,
758 chunks: "all",
759 enforce: true,
760 },
761 },
762 },
763 },
764 plugins: [
765 new MiniCssExtractPlugin({
766 filename: "[name].css",
767 }),
768 ],
769 module: {
770 rules: [
771 {
772 test: /\.css$/,
773 use: [MiniCssExtractPlugin.loader, "css-loader"],
774 },
775 ],
776 },
777};
778```
779
780Note that `type` should be used instead of `test` in Webpack 5, or else an extra `.js` file can be generated besides the `.css` file. This is because `test` doesn't know which modules should be dropped (in this case, it won't detect that `.js` should be dropped).
781
782### Extracting CSS based on entry
783
784You may also extract the CSS based on the webpack entry name.
785This is especially useful if you import routes dynamically but want to keep your CSS bundled according to entry.
786This also prevents the CSS duplication issue one had with the ExtractTextPlugin.
787
788```js
789const path = require("path");
790const MiniCssExtractPlugin = require("mini-css-extract-plugin");
791
792function recursiveIssuer(m, c) {
793 const issuer = c.moduleGraph.getIssuer(m);
794 // For webpack@4 issuer = m.issuer
795
796 if (issuer) {
797 return recursiveIssuer(issuer, c);
798 }
799
800 const chunks = c.chunkGraph.getModuleChunks(m);
801 // For webpack@4 chunks = m._chunks
802
803 for (const chunk of chunks) {
804 return chunk.name;
805 }
806
807 return false;
808}
809
810module.exports = {
811 entry: {
812 foo: path.resolve(__dirname, "src/foo"),
813 bar: path.resolve(__dirname, "src/bar"),
814 },
815 optimization: {
816 splitChunks: {
817 cacheGroups: {
818 fooStyles: {
819 name: "styles_foo",
820 test: (m, c, entry = "foo") =>
821 m.constructor.name === "CssModule" &&
822 recursiveIssuer(m, c) === entry,
823 chunks: "all",
824 enforce: true,
825 },
826 barStyles: {
827 name: "styles_bar",
828 test: (m, c, entry = "bar") =>
829 m.constructor.name === "CssModule" &&
830 recursiveIssuer(m, c) === entry,
831 chunks: "all",
832 enforce: true,
833 },
834 },
835 },
836 },
837 plugins: [
838 new MiniCssExtractPlugin({
839 filename: "[name].css",
840 }),
841 ],
842 module: {
843 rules: [
844 {
845 test: /\.css$/,
846 use: [MiniCssExtractPlugin.loader, "css-loader"],
847 },
848 ],
849 },
850};
851```
852
853### Filename Option as function
854
855With the `filename` option you can use chunk data to customize the filename.
856This is particularly useful when dealing with multiple entry points and wanting to get more control out of the filename for a given entry point/chunk.
857In the example below, we'll use `filename` to output the generated css into a different directory.
858
859**webpack.config.js**
860
861```js
862const MiniCssExtractPlugin = require("mini-css-extract-plugin");
863
864module.exports = {
865 plugins: [
866 new MiniCssExtractPlugin({
867 filename: ({ chunk }) => `${chunk.name.replace("/js/", "/css/")}.css`,
868 }),
869 ],
870 module: {
871 rules: [
872 {
873 test: /\.css$/,
874 use: [MiniCssExtractPlugin.loader, "css-loader"],
875 },
876 ],
877 },
878};
879```
880
881### Long Term Caching
882
883For long term caching use `filename: "[contenthash].css"`. Optionally add `[name]`.
884
885**webpack.config.js**
886
887```js
888const MiniCssExtractPlugin = require("mini-css-extract-plugin");
889
890module.exports = {
891 plugins: [
892 new MiniCssExtractPlugin({
893 filename: "[name].[contenthash].css",
894 chunkFilename: "[id].[contenthash].css",
895 }),
896 ],
897 module: {
898 rules: [
899 {
900 test: /\.css$/,
901 use: [MiniCssExtractPlugin.loader, "css-loader"],
902 },
903 ],
904 },
905};
906```
907
908### Remove Order Warnings
909
910For projects where css ordering has been mitigated through consistent use of scoping or naming conventions, the css order warnings can be disabled by setting the ignoreOrder flag to true for the plugin.
911
912**webpack.config.js**
913
914```js
915const MiniCssExtractPlugin = require("mini-css-extract-plugin");
916
917module.exports = {
918 plugins: [
919 new MiniCssExtractPlugin({
920 ignoreOrder: true,
921 }),
922 ],
923 module: {
924 rules: [
925 {
926 test: /\.css$/i,
927 use: [MiniCssExtractPlugin.loader, "css-loader"],
928 },
929 ],
930 },
931};
932```
933
934### Media Query Plugin
935
936If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:
937
938- [Media Query Plugin](https://github.com/SassNinja/media-query-plugin)
939- [Media Query Splitting Plugin](https://github.com/mike-diamond/media-query-splitting-plugin)
940
941## Contributing
942
943Please take a moment to read our contributing guidelines if you haven't yet done so.
944
945[CONTRIBUTING](./.github/CONTRIBUTING.md)
946
947## License
948
949[MIT](./LICENSE)
950
951[npm]: https://img.shields.io/npm/v/mini-css-extract-plugin.svg
952[npm-url]: https://npmjs.com/package/mini-css-extract-plugin
953[node]: https://img.shields.io/node/v/mini-css-extract-plugin.svg
954[node-url]: https://nodejs.org
955[deps]: https://david-dm.org/webpack-contrib/mini-css-extract-plugin.svg
956[deps-url]: https://david-dm.org/webpack-contrib/mini-css-extract-plugin
957[tests]: https://github.com/webpack-contrib/mini-css-extract-plugin/workflows/mini-css-extract-plugin/badge.svg
958[tests-url]: https://github.com/webpack-contrib/mini-css-extract-plugin/actions
959[cover]: https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin/branch/master/graph/badge.svg
960[cover-url]: https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin
961[chat]: https://badges.gitter.im/webpack/webpack.svg
962[chat-url]: https://gitter.im/webpack/webpack
963[size]: https://packagephobia.now.sh/badge?p=mini-css-extract-plugin
964[size-url]: https://packagephobia.now.sh/result?p=mini-css-extract-plugin
Note: See TracBrowser for help on using the repository browser.