Using svg-sprite-loader with CSS

Hi, I have the following config for SVG. It works fine in JS and HTML.

chainWebpack: config => {

            extract: true,
            spriteFilename: 'dist/icons-[hash:6].svg',
            esModule: false


However, when using in CSS it compiles to local paths:

background: url(../../C:/myApp/src/img/icn/arrw.svg);

Instead of

background-image: url("/dist/icons-3eb580.svg#arrw-usage");

Has someone else encountered a similar problem?

can you add the css code?

Should be something like this:

background: url(../../../img/icn/arrw.svg);

if you’re using extract mode, you should go with something like:

background: url("/sprite.svg#arrw")

Thanks, I’ll give it a try.

But does it mean that I’ll have to import the image in the script first?

As far as I understand, when you use extract mode, your SVG files are “combined” into a sprite.
You just have to put the SVG file in your SVG folder.
I also added to the SVG rule: .include.add(path.resolve(__dirname, './src/<icons-folder>')) to mark my SVG folder, but I’m not sure if it’s mandatory.