how to change vue-cli-service build lib image address in css to absolute path

[arishojaei]

I'll make my question short!

I write this in my *.scss file:

background-image: url("~@/assets/images/Logo-en.svg");

after I run yarn build I get this in my *.css:

background-image:url(/img/Logo-fa.ad1b8dbc.svg)

BUT, I don't want first / in url:

background-image:url(img/Logo-fa.ad1b8dbc.svg)

I use vue-cli-serice to build a component library and when I use this library in a Nuxtjs project, my images didn't load because images address are relative and didn't read from /dist/img/ in my package in my node_modules

[Viggo95]

Can you provide a mini repo for reproduction?

[Viggo95]

@arishojaei

If @vue/cli-service is 4.x

You can try this code and change it in your way 👇

module.exports = {
  chainWebpack(config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .tap(opts => ({
        ...opts,
        publicPath: process.cwd(),
      }))
  })
}

If @vue/cli-service is 5.x

module.exports = {
  chainWebpack(config => {
    config.module
      .rule('svg')
      .set('generator', {
        publicPath: process.cwd()
      })
  })
}

Then, build your component library