css内で
admin.scss
background-image: url('../images/XXX.png');
と記述しても背景画像が表示してくれない、、、
相対パスをしっかりとurlに指定しているのに何故？と途方にくれていました。
調べてみるとLaravel MixはWebpackに構築されている為、
cssコンパイルをする際にurl()の中身を書き換えて最適化する機能があるみたい、、、
Laravel MixとWebpackがXXX.pngを見つけるとpublic/imagesにコピーしてからurl()の中身を以下のように書き換えてしまう。
admin.scss
background-image: url('../images/XXX.png');
↓ (書き換え)
background-image: url(/images/XXX.png?d41d8cd98f00b204e9800998ecf8427e);
※但し、絶対パスを指定すると書き換えは行われません。
admin.scss
background-image: url('/images/XXX.png');
background-image: url('http://XXX.com/images/XXX.png');
↓ (書き換えされない)
background-image: url('/images/XXX.png');
background-image: url('http://XXX.com/images/XXX.png');
便利な機能みたいだけど、恐らくこれのせいでうまく背景画像が表示されなかったみたいでした。
なのでwebpack.mix.jsに
.options({
processCssUrls: false
});
を書き足すことで書き換える機能が停止して
無事、背景画像が表示されるようになりました！
参考記事
https://readouble.com/laravel/5.5/ja/mix.html
ありがとうございました！