@@ -119,7 +119,7 @@ Example with Locals (CSS Modules):
119
119
** component-with-css-modules.js**
120
120
121
121
``` js
122
- import styles from " ./styles.css" ;
122
+ import * as styles from " ./styles.css" ;
123
123
124
124
const divElement = document .createElement (" div" );
125
125
divElement .className = styles[" my-class" ];
@@ -178,7 +178,7 @@ import "./styles.css";
178
178
** component-with-css-modules.js**
179
179
180
180
``` js
181
- import styles from " ./styles.css" ;
181
+ import * as styles from " ./styles.css" ;
182
182
183
183
const divElement = document .createElement (" div" );
184
184
divElement .className = styles[" my-class" ];
@@ -245,12 +245,12 @@ styles.use();
245
245
** component-with-css-modules.js**
246
246
247
247
``` js
248
- import styles from " ./styles.lazy.css" ;
248
+ import styles , { " my - class " as myClass } from " ./styles.lazy.css" ;
249
249
250
250
styles .use ();
251
251
252
252
const divElement = document .createElement (" div" );
253
- divElement .className = styles . locals [ " my-class " ] ;
253
+ divElement .className = myClass ;
254
254
```
255
255
256
256
All locals (class names) stored in ` locals ` property of imported object.
@@ -316,12 +316,12 @@ styles.use();
316
316
** component-with-css-modules.js**
317
317
318
318
``` js
319
- import styles from " ./styles.lazy.css" ;
319
+ import styles , { " my - class " as myClass } from " ./styles.lazy.css" ;
320
320
321
321
styles .use ();
322
322
323
323
const divElement = document .createElement (" div" );
324
- divElement .className = styles . locals [ " my-class " ] ;
324
+ divElement .className = myClass ;
325
325
```
326
326
327
327
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
420
420
** component.js**
421
421
422
422
``` js
423
- import style from " ./file.css" ;
423
+ import " ./file.css" ;
424
424
```
425
425
426
426
** webpack.config.js**
@@ -841,35 +841,44 @@ module.exports = {
841
841
842
842
### Named export for CSS Modules
843
843
844
- > ** Warning**
845
- >
846
- > Names of locals are converted to ` camelCase ` .
847
-
848
844
> ** Warning**
849
845
>
850
846
> It is not allowed to use JavaScript reserved words in css class names.
851
847
852
848
> ** Warning**
853
849
>
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) .
855
851
856
852
** styles.css**
857
853
858
854
``` css
859
- .foo-baz {
855
+ .fooBaz {
860
856
color : red ;
861
857
}
862
858
.bar {
863
859
color : blue ;
864
860
}
861
+ .my-class {
862
+ color : green ;
863
+ }
865
864
```
866
865
867
866
** index.js**
868
867
869
868
``` 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" ;
871
880
872
- console .log (fooBaz, bar);
881
+ console .log (styles . fooBaz , styles . bar , styles[ " my-class " ] );
873
882
```
874
883
875
884
You can enable a ES module named export using:
0 commit comments