Invalid paths in css file

[ezoterik]

Do you want to request a feature, report a bug or ask a question?

Bug or question

What is the current behavior?

After runing npm run dev I get (in dist/css/main.css):

body {
    background-image: url(b9a42b87318abfe2a6e6.svg);
}

What is the expected behavior?

body {
    background-image: url("./images/sprite.svg#error404");
}

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code. The best way is to create repo with minimal setup to demonstrate a problem (package.json, webpack config and your code). It you don't want to create a repository - create a gist with multiple files

https://github.com/ezoterik/test-svg

If this is a feature request, what is motivation or use case for changing the behavior?

Please tell us about your environment:

• Node.js version: v14.18.1
• webpack version: 5.61.0
• svg-sprite-loader version: 6.0.11
• OS type & version: Windows 10 (WSL2)

Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

Perhaps I am doing something wrong?

[bryanpizzillo]

@ezoterik Did you ever happen to find a fix for this? I have been trying to fight the SpriteLoaderPlugin and css-loader to get a proper URL. I have been trying to figure out what is going on, and I have ended up with:

• My incorrectly referenced .svg files now only contains the JS for the sprite.|
  • It seems like there is a default rule for file assets in webpack 5?
• css-loader blows up because the resolved object is not a URL
  • This starts happening when I change the type for the svg rule to be javascript/auto or similar. This is because the module is being returned to css-loader, which is an object representing the sprite and not just a module that exports a URL which css-loader wants.
• With a custom RuntimeGenerator that ONLY returns the sprite url, matching what css-loader wants, then the svg-sprite-loader blows up.

[3mg]

Same issue, did someone figured out how to use url in css with this plugin ?