npm - Webpack resolve-url-loader 解析不正确的路径

Question

我正在使用resolve-url-loader非常适合导入第三方样式表，这些样式表又链接到他们自己的资产。

但是，我很难理解在下面的实例中我对owl.jpgfrom的引用如何app.scss成功解决？

文件夹结构：

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

应用程序.scss

这些不正确的资产路径似乎仍然可以解决？

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

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

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

当然，路径应该只用下面的路径解析？

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

我错过了什么吗？resolve-url-loader 是否足够聪明，可以解析不正确的路径？

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%;
}