Skip to content

Commit 89585cf

Browse files
docschina-botdocschina-bot
committed
docs(en): fetch all
1 parent c3b9318 commit 89585cf

File tree

1 file changed

+210
-41
lines changed

1 file changed

+210
-41
lines changed

‎src/content/loaders/css-loader.mdx‎

Lines changed: 210 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -60,47 +60,19 @@ module.exports = {
6060

6161
And run `webpack` via your preferred method.
6262

63-
### `toString`
64-
65-
You can also use the css-loader results directly as a string, such as in Angular's component style.
66-
67-
**webpack.config.js**
68-
69-
```js
70-
module.exports = {
71-
module: {
72-
rules: [
73-
{
74-
test: /\.css$/i,
75-
use: ["to-string-loader", "css-loader"],
76-
},
77-
],
78-
},
79-
};
80-
```
81-
82-
or
83-
84-
```js
85-
const css = require("./test.css").toString();
86-
87-
console.log(css); // {String}
88-
```
89-
90-
If there are SourceMaps, they will also be included in the result string.
91-
9263
If, for one reason or another, you need to extract CSS as a file (i.e. do not store CSS in a JS module) you might want to check out the [recommend example](https://github.com/webpack-contrib/css-loader#recommend).
9364

9465
## Options
9566

96-
| Name | Type | Default | Description |
97-
| :-----------------------------------: | :-------------------------: | :----------------: | :----------------------------------------------------------------------------------------------------------------------- |
98-
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
99-
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
100-
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
101-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
102-
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
103-
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
67+
| Name | Type | Default | Description |
68+
| :-----------------------------------: | :------------------------------------------: | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69+
| **[`url`](#url)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `url()`/`image-set()` functions handling |
70+
| **[`import`](#import)** | `{Boolean\|Object}` | `true` | Allows to enables/disables `@import` at-rules handling |
71+
| **[`modules`](#modules)** | `{Boolean\|String\|Object}` | `{auto: true}` | Allows to enables/disables or setup CSS Modules options |
72+
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
73+
| **[`importLoaders`](#importloaders)** | `{Number}` | `0` | Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports |
74+
| **[`esModule`](#esmodule)** | `{Boolean}` | `true` | Use ES modules syntax |
75+
| **[`exportType`](#exporttype)** | `{'array' \| 'string' \| 'css-style-sheet'}` | `array` | Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)) |
10476

10577
### `url`
10678

@@ -1275,6 +1247,203 @@ module.exports = {
12751247
};
12761248
```
12771249

1250+
### `exportType`
1251+
1252+
Type: `'array' | 'string' | 'css-style-sheet'`
1253+
Default: `'array'`
1254+
1255+
Allows exporting styles as array with modules, string or [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
1256+
Default value is `'array'`, i.e. loader exports array of modules with specific API which is used in `style-loader` or other.
1257+
1258+
**webpack.config.js**
1259+
1260+
```js
1261+
module.exports = {
1262+
module: {
1263+
rules: [
1264+
{
1265+
assert: { type: "css" },
1266+
loader: "css-loader",
1267+
options: {
1268+
exportType: "css-style-sheet",
1269+
},
1270+
},
1271+
],
1272+
},
1273+
};
1274+
```
1275+
1276+
**src/index.js**
1277+
1278+
```js
1279+
import sheet from "./styles.css" assert { type: "css" };
1280+
1281+
document.adoptedStyleSheets = [sheet];
1282+
shadowRoot.adoptedStyleSheets = [sheet];
1283+
```
1284+
1285+
#### `'array'`
1286+
1287+
The default export is array of modules with specific API which is used in `style-loader` or other.
1288+
1289+
**webpack.config.js**
1290+
1291+
```js
1292+
module.exports = {
1293+
module: {
1294+
rules: [
1295+
{
1296+
test: /\.(sa|sc|c)ss$/i,
1297+
use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
1298+
},
1299+
],
1300+
},
1301+
};
1302+
```
1303+
1304+
**src/index.js**
1305+
1306+
```js
1307+
// `style-loader` applies styles to DOM
1308+
import "./styles.css";
1309+
```
1310+
1311+
#### `'string'`
1312+
1313+
> ⚠ You don't need [`style-loader`](/loaders/style-loader/) anymore, please remove it.
1314+
> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1315+
1316+
The default export is `string`.
1317+
1318+
**webpack.config.js**
1319+
1320+
```js
1321+
module.exports = {
1322+
module: {
1323+
rules: [
1324+
{
1325+
test: /\.(sa|sc|c)ss$/i,
1326+
use: ["css-loader", "postcss-loader", "sass-loader"],
1327+
},
1328+
],
1329+
},
1330+
};
1331+
```
1332+
1333+
**src/index.js**
1334+
1335+
```js
1336+
import sheet from "./styles.css";
1337+
1338+
console.log(sheet);
1339+
```
1340+
1341+
#### `'css-style-sheet'`
1342+
1343+
> ⚠ `@import` rules not yet allowed, more [information](https://web.dev/css-module-scripts/#@import-rules-not-yet-allowed)
1344+
> ⚠ You don't need [`style-loader`](/loaders/style-loader/) anymore, please remove it.
1345+
> ⚠ The `esModules` option should be enabled if you want to use it with [`CSS modules`](https://github.com/webpack-contrib/css-loader#modules), by default for locals will be used [named export](https://github.com/webpack-contrib/css-loader#namedexport).
1346+
> ⚠ Source maps are not currently supported in `Chrome` due [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1174094&q=CSSStyleSheet%20source%20maps&can=2)
1347+
1348+
The default export is a [constructable stylesheet](https://developers.google.com/web/updates/2019/02/constructable-stylesheets) (i.e. [`CSSStyleSheet`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet)).
1349+
1350+
Useful for [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) and shadow DOM.
1351+
1352+
More information:
1353+
1354+
- [Using CSS Module Scripts to import stylesheets](https://web.dev/css-module-scripts/)
1355+
- [Constructable Stylesheets: seamless reusable styles](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)
1356+
1357+
**webpack.config.js**
1358+
1359+
```js
1360+
module.exports = {
1361+
module: {
1362+
rules: [
1363+
{
1364+
assert: { type: "css" },
1365+
loader: "css-loader",
1366+
options: {
1367+
exportType: "css-style-sheet",
1368+
},
1369+
},
1370+
1371+
// For Sass/SCSS:
1372+
//
1373+
// {
1374+
// assert: { type: "css" },
1375+
// rules: [
1376+
// {
1377+
// loader: "css-loader",
1378+
// options: {
1379+
// exportType: "css-style-sheet",
1380+
// // Other options
1381+
// },
1382+
// },
1383+
// {
1384+
// loader: "sass-loader",
1385+
// options: {
1386+
// // Other options
1387+
// },
1388+
// },
1389+
// ],
1390+
// },
1391+
],
1392+
},
1393+
};
1394+
```
1395+
1396+
**src/index.js**
1397+
1398+
```js
1399+
// Example for Sass/SCSS:
1400+
// import sheet from "./styles.scss" assert { type: "css" };
1401+
1402+
// Example for CSS modules:
1403+
// import sheet, { myClass } from "./styles.scss" assert { type: "css" };
1404+
1405+
// Example for CSS:
1406+
import sheet from "./styles.css" assert { type: "css" };
1407+
1408+
document.adoptedStyleSheets = [sheet];
1409+
shadowRoot.adoptedStyleSheets = [sheet];
1410+
```
1411+
1412+
For migration purposes, you can use the following configuration:
1413+
1414+
```js
1415+
module.exports = {
1416+
module: {
1417+
rules: [
1418+
{
1419+
test: /\.css$/i,
1420+
oneOf: [
1421+
{
1422+
assert: { type: "css" },
1423+
loader: "css-loader",
1424+
options: {
1425+
exportType: "css-style-sheet",
1426+
// Other options
1427+
},
1428+
},
1429+
{
1430+
use: [
1431+
"style-loader",
1432+
{
1433+
loader: "css-loader",
1434+
options: {
1435+
// Other options
1436+
},
1437+
},
1438+
],
1439+
},
1440+
],
1441+
},
1442+
],
1443+
},
1444+
};
1445+
```
1446+
12781447
## Examples
12791448

12801449
### Recommend
@@ -1295,7 +1464,7 @@ module.exports = {
12951464
module: {
12961465
rules: [
12971466
{
1298-
test: /\.(sa|sc|c)ss$/,
1467+
test: /\.(sa|sc|c)ss$/i,
12991468
use: [
13001469
devMode ? "style-loader" : MiniCssExtractPlugin.loader,
13011470
"css-loader",
@@ -1518,8 +1687,8 @@ module.exports = {
15181687
// --------
15191688
// SCSS ALL EXCEPT MODULES
15201689
{
1521-
test: /\.scss$/,
1522-
exclude: /\.module\.scss$/,
1690+
test: /\.scss$/i,
1691+
exclude: /\.module\.scss$/i,
15231692
use: [
15241693
{
15251694
loader: "style-loader",
@@ -1541,7 +1710,7 @@ module.exports = {
15411710
// --------
15421711
// SCSS MODULES
15431712
{
1544-
test: /\.module\.scss$/,
1713+
test: /\.module\.scss$/i,
15451714
use: [
15461715
{
15471716
loader: "style-loader",

0 commit comments

Comments
 (0)