Resolving image paths in external SCSS files in Nuxt.js

Question

I am attempting to keep certain component scss files sepeated from their Vue components. At the same time I am also including a GLOBAL scss file which will not be scoped. Regardless of which files I use, I can not get the /assets or /static image paths to resolve appropriately.

A sample of my nuxt.config.js:

module.exports = {
   css: [
      // SCSS file in the project
      '@/assets/scss/base.scss'
   ],
}

In my individual view file I am importing the component scss file this way:

<style lang="scss">
   @import "../assets/scss/pages/home";
</style>

Regardless of which way I load, I cannot resolve the following paths in scss:

.myClass {
  background-image: url('~assets/img/my-image.jpg');
}

OR

.myClass {
  background-image: url('~static/img/my-image.jpg');
}

OR

.myClass {
  background-image: url('/img/my-image.jpg');
}

All of these end with 404s. I'm wracking my brain on this one. Assets are in both /static and /assets for the sake of testing.

Any ideas on what I could be doing wrong?

I think this will definitely help :https://stackoverflow.com/a/940475/1971378. Its relative to the CSS file & ! the document. — trk, Dec 08 '17 at 22:35
@82Tuskers - yes, I’m aware of how relative paths are handled in CSS. This is a Nuxt / Webpack related issue where regardless of where I’ve been placing the images, using the example code directly from Nuxt, I am not getting my assets served appropriarelt. The ~ is a symbol handled by the build process and traditionally all of the css is inlined in the head. — radiantstatic, Dec 09 '17 at 23:40

score 5 · Answer 1 · answered Jul 21 '20 at 08:45

5

This works for me in assets case:

.myClass {
  background-image: url('~@/assets/img/my-image.jpg');
}

answered Jul 21 '20 at 08:45

Georgiy Bukharov

356
3
10

score 0 · Answer 2 · answered Sep 26 '18 at 06:36

While I could not resolve the issue within the CSS, I was able to get it to work by setting the style property directly on the element

:style="{'background-image': `url(${backgroundLocation})`}

In my case I imported the image and passed it to the template within data. This meant that backgroundLocation resolved to something like /_nuxt/img/..... Then you need to prepend the url() css function.

Resolving image paths in external SCSS files in Nuxt.js

2 Answers2