Svg is abstracted from css file.

[Evashasha]

Hi, I've met a problem that encoded svg code was abstracted from its source css file.

The code in source file is like as following👇

$alert-primary-color-icon: red;
html{
    background-image: url(./assets/calendar.svg?fill=#{$alert-primary-color-icon});
}

After I run the command npm run build, output files in the destination directory 'dist' are like as following picture.

The repository address is https://github.com/Evashasha/resolve-url-loader-test .

I'm looking forward author's help.🌹🌹🌹

[bhovhannes]

Hello,
thank you for putting together a repo for reproducing the issue. That was helpful.

Adding type: 'javascript/auto', to the rule for *.svg files makes things work. I've put the patch which can be applied to your repo below:

Index: webpack.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/webpack.config.js b/webpack.config.js
--- a/webpack.config.js	(revision 7884fd3d83e86b887553087a8fe1ca9af4fc150a)
+++ b/webpack.config.js	(date 1691670185129)
@@ -43,6 +43,7 @@
                 ],
             }, {
                 test: /\.svg(\?.*)?$/,  // match img.svg and img.svg?param=value
+                type: 'javascript/auto',
                 use: [
                     {
                         loader: 'svg-url-loader',

This issue is not related to svg-url-loader but rather to how webpack 5 treats assets. This is documented in https://webpack.js.org/guides/asset-modules/ . I don't think I can do something about it inside svg-url-loader.

Because of that, I am closing the issue. The patch written above should help.

[bhovhannes]

I believe the last comments in #524 are about similar use case.

[Evashasha]

I believe the last comments in #524 are about similar use case.

Hello, thank you for putting together a repo for reproducing the issue. That was helpful.

Adding type: 'javascript/auto', to the rule for *.svg files makes things work. I've put the patch which can be applied to your repo below:

Index: webpack.config.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/webpack.config.js b/webpack.config.js
--- a/webpack.config.js	(revision 7884fd3d83e86b887553087a8fe1ca9af4fc150a)
+++ b/webpack.config.js	(date 1691670185129)
@@ -43,6 +43,7 @@
                 ],
             }, {
                 test: /\.svg(\?.*)?$/,  // match img.svg and img.svg?param=value
+                type: 'javascript/auto',
                 use: [
                     {
                         loader: 'svg-url-loader',

This issue is not related to svg-url-loader but rather to how webpack 5 treats assets. This is documented in https://webpack.js.org/guides/asset-modules/ . I don't think I can do something about it inside svg-url-loader.

Because of that, I am closing the issue. The patch written above should help.

many thx~🌹🌹🌹