diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 17fd3e33e7f5..869d9a54be0e 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -262,6 +262,9 @@ module.exports = { css: { // Parser options for css modules + // Enable/disable `@import` at-rules handling, available since webpack 5.97.0 + // type: boolean + import: true, // Use ES modules named export for css exports, available since webpack 5.90.0 // type: boolean namedExports: true, @@ -281,9 +284,65 @@ module.exports = { }; ``` -### module.parser.css.namedExports +### module.parser.css + +Configure options for the CSS parser. + +```js +module.exports = { + module: { + parser: { + css: { + // ... + namedExports: true, + }, + }, + }, +}; +``` + +#### module.parser.css.import + +This option enables the handling of `@import` at-rules in CSS files. When set to `true`, `@import` statements are processed, allowing modular inclusion of styles from other CSS files. + +- Type: `boolean` +- Available: 5.97.0+ +- Example: + + ```js + module.exports = { + module: { + parser: { + css: { + import: true, + }, + }, + }, + }; + ``` + + ```css + /* reset-styles.css */ + body { + margin: 0; + padding: 0; + } + ``` + + ```css + /* styles.css */ + @import './reset-styles.css'; + + body { + background-color: red; + } + ``` + +T> To filter specific imports, you can use Webpack's built-in [IgnorePlugin](/plugins/ignore-plugin/). The [`filter` option](/loaders/css-loader/#filter), as available in `css-loader`, is not supported. + +#### module.parser.css.namedExports -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. +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. - Type: `boolean` - Available: 5.90.0+