Vue CLI - include image from assets folder in static file

Question

Is it possible to include an image, which is in assets/ foder, in some static .scss file, as a background-image?

I have a _buttons.scss partial and some buttons have an icon, which I'd like to add as a background-image. The icons are located in src/assets/ foder.

App structure:

- src
  - assets
    some_icon.svg
  - components
  - scss
    _buttons.scss
    main.scss
  - views
  App.vue
  main.js
  router.js

And in _buttons.scss:

.some-selector {
    background-image: url(../assets/some_icon.svg)

    /* also tried
    background-image: url(./assets/some_icon.svg)
    background-image: url(/assets/some_icon.svg)
    background-image: url(assets/some_icon.svg)
    */
}

Which returns an error with This relative module was not found.

I know I can simply add those styles (scoped or not) in my component, or in main App.vue, however, I was wondering if this can be achieved without that?

I know also that I can add those icons in my public folder but I would like for the icons to remain in the assets/ folder.

$ vue -V
$ 3.0.0-rc.5

Maybe some custom webpack config?

Thanks

Answer 1

You can manage that by :

background-image: url('~@/assets/some_icon.svg');

Key here is using ~@ as a prefix. URLs prefixed with ~ are treated as a module request. You need to use this prefix if you want to leverage Webpack's module resolving configurations. For example if you have a resolve alias for src folder equal to @, which you do if you use vue-cli3, you can use this type of URL to force Webpack to resolve to the needed asset in the assets folder. More info here: handling static assets