Webpack resolve-url-loader resolving incorrect paths

Question

I'm making use of the resolve-url-loader which is working great for importing third party stylesheets that are in turn linking to their own assets.

However, i'm struggling to understand how in the instance below my reference to owl.jpg from app.scss manages to successfully resolve?

Folder structure:

src/
|
|- index.html
|
|-img/
|  owl.jpg
|
|- scss/
|   app.scss
|   
|-js/
|  app.js

app.scss

These incorrect paths to the asset still seem to resolve?

.owl {
    background: url('owl.jpg');
}

.owl {
    background: url('/owl.jpg');
}

.owl {
    background: url('img/owl.jpg');
}

Surely the path should only resolve with the below path?

.owl {
    background: url('../img/owl.jpg');
}

Am i missing something? Is the resolve-url-loader clever enough to resolve incorrect paths??

Answer 1

You have to compile your scss file to css, browser works only with .css files. Then choose the output folder, i guess it can be src/css, and then enter a correct path in your css depending on images folder.

If webpack compiles scss files without errors, it just could be incorrect url to image. If correct, background-size property should be added with 100% 100% parameters.

.owl {
  background-image: (path/to/image.img);
  background-size: 100% 100%;
}