Webpack resolve-url-loader解析不正確的路徑

Question

我正在使用resolve-url-loader，它很適合導入第三方樣式表，然後鏈接到自己的資產。

但是，我正在努力瞭解如何在下面的例子中參考設法成功地解決？

文件夾結構：

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是否足夠聰明以解決不正確的路徑？

Answer 1

您必須將scss文件編譯爲css，瀏覽器僅適用於.css文件。然後選擇輸出文件夾，我想它可以是src/css，然後根據圖像文件夾在css中輸入正確的路徑。

如果webpack編譯沒有錯誤的scss文件，它可能是不正確的url圖像。如果正確，background-size屬性應該添加100% 100%參數。

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