diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx index 869d9a54be0e..99322d33de45 100644 --- a/src/content/configuration/module.mdx +++ b/src/content/configuration/module.mdx @@ -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 @@ -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.