In my Vue application, I have SCSS file imported to App.vue like this:
<style lang="scss">
@import "@/assets/styles/main.scss";
</style>
In my main.scss file I have:
background: url(../images/image.png);
When I run yarn build I'm getting the following error:
ModuleNotFoundError: Module not found: Error: Can't resolve '../images/image.png' in '/var/www/project/src'
I tried to change url(./images/image.png); to url(~/images/image.png); and error is pretty much the same - just the path to the image is different, like; '../../../../../../images/image.png
I tried to install resolve-url-loader - that did not help.
My file structure is:
.
├── public
│ ├── favicon.iso
│ └── index.html
└── src
├── assets
│ ├── styles
│ │ └── main.scss
│ └── images
│ └── image.png
├── main.js
└── App.vue
What am I doing wrong?
UPDATE
I tried to move that background: url(../images/image.png); outside the sass file and now it looks like
<style lang="scss">
body {
background: url("assets/images/FILE1180_1600.JPG");
}
@import "@/assets/styles/main.scss";
</style>
also, I tried path starting with ./ with ~, with @, with a mix of few of them some times error is that can't resolve and some times the error is ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
Spend the whole day on searching for the solution, looks like I tried all different solution I found on the internet and still not working for me.... :(
