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?

Answer 1

This works for me in assets case:

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