2

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??

Samuel
  • 2,485
  • 5
  • 30
  • 40

1 Answers1

-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%;
}
Eugene Mikhushkin
  • 155
  • 2
  • 10
  • He can use webpack loaders for that (and he probably does), `gulp-sass` isn't the only option to compile `sass` files. – Omri Luzon Jun 02 '17 at 09:12
  • 1
    Yes I am compiling my SCSS to CSS. What I don't understand is how the incorrect paths I've listed above manage to successfully resolve. – Samuel Jun 02 '17 at 21:34
  • 1
    @Samuel did you find an answer for this matter, i'm facing the same problem. – chebaby Dec 02 '17 at 19:21