You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/configuration/module.mdx
+53Lines changed: 53 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -270,6 +270,59 @@ module.exports = {
270
270
};
271
271
```
272
272
273
+
### module.parser.css.namedExports
274
+
275
+
This option enables the use of ES modules named export for CSS exports. When set to true, the CSS module will export its classes and styles using named exports.
276
+
277
+
- Type: `boolean`
278
+
- Available: 5.90.0+
279
+
- Example:
280
+
281
+
```js
282
+
module.exports= {
283
+
module: {
284
+
parser: {
285
+
css: {
286
+
namedExports:true,
287
+
},
288
+
},
289
+
},
290
+
};
291
+
```
292
+
293
+
When `namedExports` is `false` for CSS modules, you can retrieve CSS classes using various import methods.
294
+
Named exports are redirected to improve developer experience (DX), facilitating a smooth transition from default exports to named exports:
295
+
296
+
```js
297
+
import*asstylesfrom'./styles.module.css';
298
+
importstyles1from'./styles.module.css';
299
+
import { foo } from'./styles.module.css';
300
+
301
+
console.log(styles.default.foo); // Access via styles.default
302
+
console.log(styles.foo); // Access directly from styles
303
+
console.log(styles1.foo); // Access via default import styles1
304
+
console.log(foo); // Direct named import
305
+
```
306
+
307
+
When `namedExports` is enabled (default behavior), you can use **only** named exports to import CSS classes.
By enabling `namedExports`, you adopt a more modular and maintainable approach to managing CSS in JavaScript projects, leveraging ES module syntax for clearer and more explicit imports.
0 commit comments