Laraveが提供しているスターターキットの１つに、ログイン機能を司るBreezeがありますが。最近、導入してみたところ、手順どおりに導入したにもかかわらずログイン画面の表示が正しく表示されない！という事象が発生しました。
ページの先頭には「@vite([‘resources/css/app.css’, ‘resources/js/app.js’])」の文言
公式の説明には、何も書かれていないので独自に原因を追求してみました。
結論：Laravel9.xでviteがデフォルになった影響
Laravel9.xのフロントエンドの解説の中にこんな一文がある。
Laravelは、デフォルトでViteを利用してアセットをバンドルします。Viteは、ローカル開発において、ビルドが非常に速く、ほぼ瞬時のホットモジュール交換（HMR）を提供しています。
https://readouble.com/laravel/9.x/ja/frontend.html（Laravel 9.x アセットの結合）
恐らくBreezeのコードがVite前提のものに変わってしまったんだと。
でも、Breeze導入と合わせてViteが導入されるかといえば、それはないので、「@vite([‘resources/js/app.js’])」が出力されるし、Breezeと共に導入されるTailwind CSSは利用できないという不整合が発生しているんですね。
Laravel Mixに対応させよう！
具体的には、viteからmixに戻す方法が公式サイトでアナウンスされているので、その通りに対応します。サイトはこちら。
内容を確認すると、単純にコードがvita用になっているだけなので対処するのは下記の通りコードを修正するだけです。
{{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}
<link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}">
<script src="{{ asset(mix('js/app.js')) }}" defer></script>これで、cssファイルとjsファイルが読み込まれるようになりました。
でも、まだTailwind CSSは適用されないので表示は崩れたまま。
次は、Tailwind CSSを使えるようにします。
修正ファイル：webpack.mix.js
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [ require("tailwindcss"), ]
);vita前提になっているので、webpack.mix.jsに”[ requiere(“tailwindcss”), ]”の文言が抜けています。
これを追加すると無事、Tailwind CSSも適用されただしく表示されるようになりました！
vita前提になっていないBreezeのバージョンを指定すればいいのかもしれませんが、調べるのも面倒なので対応方法を調べた結果のまとめでした。
記事中の写真は写真ACのものを使用しています
写真素材｜無料素材のフリーダウンロードサイト【写真AC】を写真ACでチェック！
コメント