I am attempting to keep certain ponent scss files sepeated from their Vue ponents. 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 ponent 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 am attempting to keep certain ponent scss files sepeated from their Vue ponents. 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 ponent 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?

• javascript
• webpack
• vue.js
• nuxt.js

Share Improve this question Follow asked Dec 8, 2017 at 21:02 radiantstaticradiantstatic 34244 silver badges2020 bronze badges 4

• I think this will definitely help :stackoverflow./a/940475/1971378. Its relative to the CSS file & ! the document. – trk Commented Dec 8, 2017 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 Commented Dec 9, 2017 at 23:40
• try ~/assets/my-image.jpg? – Hammerbot Commented Dec 10, 2017 at 0:20
• try background: url("./assets/my-image.jpg"); – Syed Commented Jun 19, 2018 at 10:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This works for me in assets case:

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

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.