Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/content/configuration/module.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,8 @@ module.exports = {
// Use ES modules named export for css exports, available since webpack 5.90.0
// type: boolean
namedExports: true,
// Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
url: true,
},
'css/auto': {
// ditto
Expand Down Expand Up @@ -393,6 +395,39 @@ import { header, footer } from './styles.module.css';

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.

#### module.parser.css.url

This option enables or disables the handling of URLs in functions such as `url()`, `image-set()`, `src()`, and `image()` within CSS files. When enabled, these URLs are resolved and processed by webpack.

- Type: `boolean`
- Available: 5.97.0+
- Example:

```js
module.exports = {
module: {
parser: {
css: {
url: true,
},
},
},
};
```

```css
/* styles.css */
.background {
background-image: url('./images/bg.jpg');
}

.icon {
content: image('./icons/star.svg');
}
```

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.javascript

Configure options for JavaScript parser.
Expand Down
Loading