Laravel SailでLaravel Viteを使うとロゴが大きく表示される時の対策

Laravel Sailで環境構築!

Laravel Sailを使っていて、sail npm run devを実行すると表示がおかしくなる場合の対処法です。

Junko
Junko

ロゴがババンと大きくなったりしますが、要するに、Tailwind CSSが効いていない状態です。

Laravel SailでLaravel Viteを使うとロゴが大きく表示される時の対策

まずは、npm run dev 実行中に、public内にできるhotファイルのURLを下記のようにlocalhostに変えてみてください。

【変更前 hotファイル例】

【変更後 hotファイル例】

これでもし表示がなおれば、vite.config.jsファイルに、下記コードを追加します。

これによって、毎回hotファイルを変更する必要がなくなります。

【vite.config.js】

【変更箇所を赤丸で囲んでます】

さいごに

エラーがなおったら嬉しいです。

今後Laravelがアップデートした時に、このエラーも直るんじゃないかな、なんて期待してます。

ちなみに わたしはWindowsとMac,両方にLaravel Sailを入れてみましたが、どうやらWindows環境でのみ、このエラーが発生するようです。

Google Chromeの検証画面をチェックしてみても、Windowsの場合のみ、コンソールにエラーが出ていました。

なお今回お伝えしたような、hotファイルのこととか、Laravel Viteの仕組みについては、別の記事も参考にしてください。

Laravel Sailで環境構築! Laravel Viteの使い方とエラー対策

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

社内にWebアプリ開発経験がなくて、困ってませんか?

「自社でWebアプリ開発を始めていきたい」
という企業様のために、Laravelセミナー・プログラミング教育を実施しています。

【セミナー使用スライド】

詳細はこちらご覧ください

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました