Skip to content

Commit 565362c

Browse files
docs: update
1 parent 7122cde commit 565362c

File tree

1 file changed

+24
-15
lines changed

1 file changed

+24
-15
lines changed

README.md

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ Example with Locals (CSS Modules):
119119
**component-with-css-modules.js**
120120

121121
```js
122-
import styles from "./styles.css";
122+
import * as styles from "./styles.css";
123123

124124
const divElement = document.createElement("div");
125125
divElement.className = styles["my-class"];
@@ -178,7 +178,7 @@ import "./styles.css";
178178
**component-with-css-modules.js**
179179

180180
```js
181-
import styles from "./styles.css";
181+
import * as styles from "./styles.css";
182182

183183
const divElement = document.createElement("div");
184184
divElement.className = styles["my-class"];
@@ -245,12 +245,12 @@ styles.use();
245245
**component-with-css-modules.js**
246246

247247
```js
248-
import styles from "./styles.lazy.css";
248+
import styles, { "my-class" as myClass } from "./styles.lazy.css";
249249

250250
styles.use();
251251

252252
const divElement = document.createElement("div");
253-
divElement.className = styles.locals["my-class"];
253+
divElement.className = myClass;
254254
```
255255

256256
All locals (class names) stored in `locals` property of imported object.
@@ -316,12 +316,12 @@ styles.use();
316316
**component-with-css-modules.js**
317317

318318
```js
319-
import styles from "./styles.lazy.css";
319+
import styles, { "my-class" as myClass } from "./styles.lazy.css";
320320

321321
styles.use();
322322

323323
const divElement = document.createElement("div");
324-
divElement.className = styles.locals["my-class"];
324+
divElement.className = myClass;
325325
```
326326

327327
All locals (class names) stored in `locals` property of imported object.
@@ -420,7 +420,7 @@ If defined, the `style-loader` will attach given attributes with their values on
420420
**component.js**
421421

422422
```js
423-
import style from "./file.css";
423+
import "./file.css";
424424
```
425425

426426
**webpack.config.js**
@@ -841,35 +841,44 @@ module.exports = {
841841

842842
### Named export for CSS Modules
843843

844-
> **Warning**
845-
>
846-
> Names of locals are converted to `camelCase`.
847-
848844
> **Warning**
849845
>
850846
> It is not allowed to use JavaScript reserved words in css class names.
851847
852848
> **Warning**
853849
>
854-
> Options `esModule` and `modules.namedExport` in `css-loader` should be enabled.
850+
> Options `esModule` and `modules.namedExport` in `css-loader` should be enabled (by default for `css-loader@7` it is true).
855851
856852
**styles.css**
857853

858854
```css
859-
.foo-baz {
855+
.fooBaz {
860856
color: red;
861857
}
862858
.bar {
863859
color: blue;
864860
}
861+
.my-class {
862+
color: green;
863+
}
865864
```
866865

867866
**index.js**
868867

869868
```js
870-
import { fooBaz, bar } from "./styles.css";
869+
import { fooBaz, bar, "my-class" as myClass } from "./styles.css";
870+
871+
console.log(fooBaz, bar, myClass);
872+
```
873+
874+
Or:
875+
876+
**index.js**
877+
878+
```js
879+
import * as styles from "./styles.css";
871880

872-
console.log(fooBaz, bar);
881+
console.log(styles.fooBaz, styles.bar, styles["my-class"]);
873882
```
874883

875884
You can enable a ES module named export using:

0 commit comments

Comments
 (0)