Using svg-sprite-loader with CSS

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

chainWebpack: config => {
    config.module.rules.delete('svg')

    config.module
        .rule('svg')
        .test(/\.svg$/)
        .use('svg-sprite')
        .loader('svg-sprite-loader')
        .options({
            extract: true,
            spriteFilename: 'dist/icons-[hash:6].svg',
            esModule: false
        })

    config.plugin('svg-sprite')
        .use(require('svg-sprite-loader/plugin'))
}

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?