Skip to content

Commit 199eb7d

Browse files
authored
docs(module): add css parser url option (#7491)
1 parent 86ae32b commit 199eb7d

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

src/content/configuration/module.mdx

+35
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,8 @@ module.exports = {
268268
// Use ES modules named export for css exports, available since webpack 5.90.0
269269
// type: boolean
270270
namedExports: true,
271+
// Enable/disable url()/image-set()/src()/image() functions handling, available since webpack 5.97.0
272+
url: true,
271273
},
272274
'css/auto': {
273275
// ditto
@@ -393,6 +395,39 @@ import { header, footer } from './styles.module.css';
393395

394396
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.
395397

398+
#### module.parser.css.url
399+
400+
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.
401+
402+
- Type: `boolean`
403+
- Available: 5.97.0+
404+
- Example:
405+
406+
```js
407+
module.exports = {
408+
module: {
409+
parser: {
410+
css: {
411+
url: true,
412+
},
413+
},
414+
},
415+
};
416+
```
417+
418+
```css
419+
/* styles.css */
420+
.background {
421+
background-image: url('./images/bg.jpg');
422+
}
423+
424+
.icon {
425+
content: image('./icons/star.svg');
426+
}
427+
```
428+
429+
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.
430+
396431
### module.parser.javascript
397432

398433
Configure options for JavaScript parser.

0 commit comments

Comments
 (0)