【Laravel・CSS】Mixが連続で実行される・background-imageが使用できない😭⇦webpackの設定を追加しよう🤗

はじめに

業務中・学習中、LaravelでCSSを書いている時

「Laravel Mixが勝手に何度も実行される」
「background-imageが使用できない;;」
「パスがあっていることも確認済なのに...😭」

そんなことはないでしょうか?

今回はwebpack.mix.jsに設定を追加して、上記の問題を解決しようと思います。

この記事を見るメリット

• Laravel mixでbackground-imageを使用できるようになる
• webpack.mix.jsの設定の追加方法が分かる
• Laravel Mixが連続で実行される現象を解消できる

対象者

この記事は下記のような人を対象にしています。

• プログラミング初学者
• 駆け出しエンジニア
• Laravel Mixでどうしてもbackground-imageを使いたい方
• Mixが勝手に何度も実行されて困っている方

結論

webpack.mix.jsのmix.js('resources/js/app.js', 'public/js')に以下の記述を追加する🤗

.options({
        processCssUrls: false,
    });

その後、background-imageの画像パスを修正する

../../public/images/hoge.png

上記の相対パスから

/images/hoge.png

上記のようにVueでimgを書く際と、同じようなパスの書き方をすることができる！

解説

Mixが実行する時に、JSやCSSをコンパイルするのですが、その際画像パスは自分がCSSで記述したパスとは異なったものになってしまいます。
processCssUrls: false,でCSSのURLのコンパイルを防ぐことで、自分が記述したパスのままにすることができます！

また、sassで記述している際は、
mix.sass('resources/assets/app/app.scss', 'public/css')
上記にprocessCssUrls: false,を追加するようにするとコンパイル時のパスの変化を防ぐことができます！

おわりに

今回はbackground-imageのパスのせいで、Laravel Mixが頻繁に実行されてしまう現象の解決方法を紹介させていただきました！
Laravel学習中の方などはwebpackの設定を書いたりすることはないので、これを機に他の設定を見てみると、追加や修正に抵抗感がなくなるのでオススメです！

最後まで記事を見てくださりありがとうございました。
誤字や脱字、コードのリファクタリングできる箇所などがありましたらコメントくださるとありがたいです!
また、いいねをしてくださると、筆者が喜びます:)