Skip to content

Commit 1af5566

Browse files
docschina-botdocschina-bot
committed
docs(en): fetch all
1 parent 81b6dd3 commit 1af5566

File tree

1 file changed

+161
-9
lines changed

1 file changed

+161
-9
lines changed

‎src/content/plugins/mini-css-extract-plugin.mdx‎

Lines changed: 161 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,23 @@ module.exports = {
7878
};
7979
```
8080

81+
> ⚠️ Note that if you import CSS from your webpack entrypoint or import styles in the [initial](/concepts/under-the-hood/#chunks) chunk, `mini-css-extract-plugin` will not load this CSS into the page. Please use [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) for automatic generation `link` tags or create `index.html` file with `link` tag.
82+
83+
> ⚠️ Source maps works only for `source-map`/`nosources-source-map`/`hidden-nosources-source-map`/`hidden-source-map` values because CSS only supports source maps with the `sourceMappingURL` comment (i.e. `//# sourceMappingURL=style.css.map`). If you need set `devtool` to another value you can enable source maps generation for extracted CSS using [`sourceMap: true`](https://github.com/webpack-contrib/css-loader#sourcemap) for `css-loader`.
84+
8185
## Options
8286

8387
### Plugin Options
8488

85-
| Name | Type | Default | Description |
86-
| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------- |
87-
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
88-
| **[`chunkFilename`](#chunkfilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
89-
| **[`ignoreOrder`](#ignoreorder)** | `{Boolean}` | `false` | Remove Order Warnings |
90-
| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts `<link>` at the given position |
91-
| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to tag |
92-
| **[`linkType`](#linktype)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
93-
| **[`experimentalUseImportModule`](#experimentaluseimportmodule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
89+
| Name | Type | Default | Description |
90+
| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------- |
91+
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
92+
| **[`chunkFilename`](#chunkfilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
93+
| **[`ignoreOrder`](#ignoreorder)** | `{Boolean}` | `false` | Remove Order Warnings |
94+
| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts the `link` tag at the given position for [non-initial (async)](/concepts/under-the-hood/#chunks) CSS chunks |
95+
| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to the `link` tag for [non-initial (async)](/concepts/under-the-hood/#chunks) CSS chunks |
96+
| **[`linkType`](#linktype)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
97+
| **[`experimentalUseImportModule`](#experimentaluseimportmodule)** | `{Boolean}` | `false` | Use an experimental webpack API to execute modules instead of child compilers |
9498

9599
#### `filename`
96100

@@ -125,6 +129,8 @@ See [examples](#remove-order-warnings) below for details.
125129
Type: `String|Function`
126130
Default: `document.head.appendChild(linkTag);`
127131

132+
> ⚠️ Only for [non-initial (async)](/concepts/under-the-hood/#chunks) chunks.
133+
128134
By default, the `mini-css-extract-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
129135

130136
However in some circumstances it might be necessary to have finer control over the append target or even delay `link` elements insertion.
@@ -176,6 +182,8 @@ A new `<link>` element will be inserted before the element with id `some-element
176182
Type: `Object`
177183
Default: `{}`
178184

185+
> ⚠️ Only for [non-initial (async)](/concepts/under-the-hood/#chunks) chunks.
186+
179187
If defined, the `mini-css-extract-plugin` will attach given attributes with their values on `<link>` element.
180188

181189
**webpack.config.js**
@@ -918,6 +926,150 @@ module.exports = {
918926
};
919927
```
920928

929+
### Multiple Themes
930+
931+
**webpack.config.js**
932+
933+
```js
934+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
935+
936+
module.exports = {
937+
entry: "./src/index.js",
938+
module: {
939+
rules: [
940+
{
941+
test: /\.s[ac]ss$/i,
942+
oneOf: [
943+
{
944+
resourceQuery: "?dark",
945+
use: [
946+
Self.loader,
947+
"css-loader",
948+
{
949+
loader: "sass-loader",
950+
options: {
951+
additionalData: `@use 'dark-theme/vars' as vars;`,
952+
},
953+
},
954+
],
955+
},
956+
{
957+
use: [
958+
Self.loader,
959+
"css-loader",
960+
{
961+
loader: "sass-loader",
962+
options: {
963+
additionalData: `@use 'light-theme/vars' as vars;`,
964+
},
965+
},
966+
],
967+
},
968+
],
969+
},
970+
],
971+
},
972+
plugins: [
973+
new Self({
974+
filename: "[name].css",
975+
attributes: {
976+
id: "theme",
977+
},
978+
}),
979+
],
980+
};
981+
```
982+
983+
**src/index.js**
984+
985+
```js
986+
import "./style.scss";
987+
988+
let theme = "light";
989+
const themes = {};
990+
991+
themes[theme] = document.querySelector("#theme");
992+
993+
async function loadTheme(newTheme) {
994+
// eslint-disable-next-line no-console
995+
console.log(`CHANGE THEME - ${newTheme}`);
996+
997+
const themeElement = document.querySelector("#theme");
998+
999+
if (themeElement) {
1000+
themeElement.remove();
1001+
}
1002+
1003+
if (themes[newTheme]) {
1004+
// eslint-disable-next-line no-console
1005+
console.log(`THEME ALREADY LOADED - ${newTheme}`);
1006+
1007+
document.head.appendChild(themes[newTheme]);
1008+
1009+
return;
1010+
}
1011+
1012+
if (newTheme === "dark") {
1013+
// eslint-disable-next-line no-console
1014+
console.log(`LOADING THEME - ${newTheme}`);
1015+
1016+
import(/* webpackChunkName: "dark" */ "./style.scss?dark").then(() => {
1017+
themes[newTheme] = document.querySelector("#theme");
1018+
1019+
// eslint-disable-next-line no-console
1020+
console.log(`LOADED - ${newTheme}`);
1021+
});
1022+
}
1023+
}
1024+
1025+
document.onclick = () => {
1026+
if (theme === "light") {
1027+
theme = "dark";
1028+
} else {
1029+
theme = "light";
1030+
}
1031+
1032+
loadTheme(theme);
1033+
};
1034+
```
1035+
1036+
**src/dark-theme/\_vars.scss**
1037+
1038+
```scss
1039+
$background: black;
1040+
```
1041+
1042+
**src/light-theme/\_vars.scss**
1043+
1044+
```scss
1045+
$background: white;
1046+
```
1047+
1048+
**src/styles.scss**
1049+
1050+
```scss
1051+
body {
1052+
background-color: vars.$background;
1053+
}
1054+
```
1055+
1056+
**public/index.html**
1057+
1058+
```html
1059+
<!DOCTYPE html>
1060+
<html lang="en">
1061+
<head>
1062+
<meta charset="UTF-8" />
1063+
<meta name="viewport" content="width=device-width, initial-scale=1" />
1064+
<title>Document</title>
1065+
<link id="theme" rel="stylesheet" type="text/css" href="./main.css" />
1066+
</head>
1067+
<body>
1068+
<script src="./main.js"></script>
1069+
</body>
1070+
</html>
1071+
```
1072+
9211073
### Media Query Plugin
9221074

9231075
If 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:

0 commit comments

Comments
 (0)