Webpack resolve-url-loaderが不正なパスを解決する

Question

私は自分の資産にリンクしているサードパーティのスタイルシートをインポートするのに効果的な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は、間違ったパスを解決するのに十分なほど賢明ですか？

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