I use CSS Modules.
I don’t need resolving of url, but I need replace url paths with my custom function call so that I could get the full url at runtime by myself with my custom logic.
For example,
<code>"background-image: url(/img/image.png)"
</code>
<code>"background-image: url(/img/image.png)"
</code>
"background-image: url(/img/image.png)"
should turn into:
<code>"background-image: url(" + myLoader.get('/img/image.png') + ")"
</code>
<code>"background-image: url(" + myLoader.get('/img/image.png') + ")"
</code>
"background-image: url(" + myLoader.get('/img/image.png') + ")"
Because of specific image organization I can’t use only one generated variant of url after build.
I have to define url at runtime.
I tried css-loader
with such config:
<code>test: /.(png|jpg)/,
type: 'asset/inline',
generator: {
dataUrl: (imageContent, fileData) => {
const imagePath = fileData.module.rawRequest
return `myLoader.get(${ imagePath })`
}
}
</code>
<code>test: /.(png|jpg)/,
type: 'asset/inline',
generator: {
dataUrl: (imageContent, fileData) => {
const imagePath = fileData.module.rawRequest
return `myLoader.get(${ imagePath })`
}
}
</code>
test: /.(png|jpg)/,
type: 'asset/inline',
generator: {
dataUrl: (imageContent, fileData) => {
const imagePath = fileData.module.rawRequest
return `myLoader.get(${ imagePath })`
}
}
But it generates a string “myLoader.get”, not js expression that executes at runtime.
Thank you so much in advance for your help!