5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Laravel9】Laravel Mixを使用しているプロジェクトでBreezeをインストールすると、js・css共に反映されない問題

Posted at

需要があるかどうかは分かりませんが、あくまで自分用のメモとして残しておきます。

どういうこと?

個人的にLaravel Mix(webpack)を使用してLaravelプロジェクト開発の練習を行っていた際、認証機能の実装を全部手動で行うのが手間だった為、Laravel Breezeに丸投げしてしまおうと思いインストールしたら、jscssも反映されなかった。

インストールの手順は?

公式のドキュメント通りにインストール。

composer require laravel/breeze --dev
php artisan breeze:install

php artisan migrate
npm install
npm run dev

インストール後の状態は?

welcome.blade.phpのページは問題ないが、認証関連のページが軒並み全滅。

原因は?

ドキュメントの通りインストールすると、viteを使用するようにページが生成されてしまうのが原因の模様。
現プロジェクトはlaravel mixを使用しているためviteが動かず、結果生成された認証関連のbladeファイルに反映されなくなってしまっていた。

※各種bladeファイルのjs cssの読み込みが以下のような記述だと、laravel mix環境では反映されない

@vite(['resources/css/app.css', 'resources/js/app.js'])

解決方法は?

単純に、上記の記述を書き換えればOK。

@vite(['resources/css/app.css', 'resources/js/app.js']) ← 削除
↓
<link href="{{ mix('css/app.css') }}" rel="stylesheet"> ← 追加
<script src="{{ mix('js/app.js') }}"></script> ← 追加

【補足】@viteの記述が確認できたファイル

resources/views/layouts/guest.blade.php
resources/views/layouts/app.blade.php

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?