Skip to content

Commit

Permalink
docs(module): add css parser url option (#7491)
Browse files Browse the repository at this point in the history
  • Loading branch information
snitin315 authored Dec 11, 2024
1 parent 86ae32b commit 199eb7d
Showing 1 changed file with 35 additions and 0 deletions.
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

0 comments on commit 199eb7d

Please sign in to comment.