vue-cli webpack sass backgorund image cant be resolved

Question

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.... :(

Answer 1

ooooh, the issue was in the image name, I still not sure what exactly but when I rename it to backgroun.jpg it starts working... probably some encoding issue... But still, it works only when it's outside of the sass file, otherwise, webpack can't find it