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

【问题标题】：Webpack resolve-url-loader resolving incorrect pathsWebpack resolve-url-loader 解析不正确的路径
【发布时间】：2017-11-02 04:45:42
【问题描述】：

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

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

文件夹结构：

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

app.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 是否足够聪明，可以解析不正确的路径？？

【问题讨论】：

【解决方案1】：

您必须将您的 scss 文件编译为 css，浏览器仅适用于 .css 文件。然后选择输出文件夹，我猜它可以是src/css，然后根据images文件夹在你的css中输入正确的路径。

如果 webpack 编译 scss 文件时没有错误，则可能是图像的 url 不正确。如果正确，background-size 属性应该加上100% 100% 参数。

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

【讨论】：