Trying to organize my component scss files separately from their Vue components has been a bit challenging. I also have a GLOBAL scss file that is not scoped, but no matter which approach I take, I can't seem to get the image paths in /assets or /static to resolve correctly.
Here's an excerpt from my nuxt.config.js:
module.exports = {
css: [
// SCSS file in the project
'@/assets/scss/base.scss'
],
}
In my individual view file, I'm importing the component scss file like this:
<style lang="scss">
@import "../assets/scss/pages/home";
</style>
No matter how I approach it, I just can't seem to 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 lead to 404 errors. I've tried everything I can think of. There are assets in both /static and /assets for testing purposes.
Any insights on what might be going wrong?