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

I think this answer solves your problem Resolving background-image URLs in CSS files for Webpack — Max Sinev
– Max Sinev, Commented Jul 26, 2018 at 7:18
How are you using the main.scss file? I'm importing it in the main.js file and that relative import works for me. — Luis Orduz
– Luis Orduz, Commented Jul 31, 2018 at 18:53
@LuisOrduz I have @import 'main.scss' in my App.vue file. Is that a good practice to import the .scss file in the main.js? — Vucko
– Vucko, Commented Aug 1, 2018 at 4:44
@Vucko It's perfectly fine to import main.scss from App.vue. And I can't reproduce the error unless I try a nonexistent URL for background-image. Also note that ../assets/some_icon.svg is correct. Do you have a repo to look at? — tony19
– tony19, Commented Aug 1, 2018 at 6:42
@tony19 just tried what you've suggested and it really works. Didn't know that you can import in main.js the .scss files. Can you please explain a little bit why it works as an answer and I'll accept it. — Vucko
– Vucko, Commented Aug 1, 2018 at 6:48

marc_s · Accepted Answer · 2019-12-23 06:02:22Z

44

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

edited Dec 23, 2019 at 6:02

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 30, 2018 at 12:32

Saša Šijak

9,4775 gold badges52 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue CLI - include image from assets folder in static file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related