Laravelは8からさまざまなパッケージを導入しています。
それまでの主流だったLaravel/uiは認証機能としてはある程度完成されたものでした。
しかしLaravel8からはLaravel/uiは非推奨となり、新たに2つのパッケージが出てきています。
それが
- Laravel/Jet Stream
- Laravel/breeze
の2つです。「Laravel/Jet Stream」は機能が多いものの、その分難易度も高く、敷居が高いです。
「Laravel/breeze」は同じ認証機能を持つものの、「Laravel/JetStream」よりも簡単と言われています。
実際に、開発者は「JetStreamの前にBreezeを使うべき」とコメントしています。
私もLaravel/uiを使っていましたが、SPAを作成する際、LaravelのAPI機能を使いました。
そこでLaravel/uiの認証機能で、ログインしているユーザーを取ろうとしたのですが、どうやらLaravel/uiはそもそもAPIに対応していないようで……仕方なくbreezeに移行しました。
その際、何点か詰まった点がありました。
ここでは、「Laravel/ui」から「Laravel/breeze」にパッケージを移した場合の注意点について見ていきましょう。
※Laravel/breezeの導入法についてはさまざまな記事で紹介されているので省きます。
Laravel/uiからLaravel/Breezeに移行したときの注意点
①Dashboardページの注意点
Laravel/uiからLaravel/breezeに移行すると、まずDashboardというページが作られます。
サンプルページのような立ち位置で、基本的にはこのページをコピーして新しいページを作成します。
そこでdashboardというviewを探すのですが、残念ながら、存在しません。
実はこのページはviewではなく、jsに存在しています。
sourcesディレクトリのjs→Pagesを見ると「Dashboard.js」というページが存在します。
このファイルを編集するのが正解です。viewではないので、注意しましょう。
②Sassを使う場合の注意点
Laravel/breezeを導入すると、なぜかSassが適用されなくなります。
正確にはコンパイルの対象から削除されてしまうので、追加しましょう。
追加はプロジェクトディレクトリにある「webpack.mix.js」で行えます。
そこに、以下のような内容を追加しましょう。
1 2 3 4 5 6 7 8 9 |
mix.js('resources/js/app.js', 'public/js') .react() .postCss('resources/css/app.css', 'public/css', [ require('postcss-import'), require('tailwindcss'), require('autoprefixer'), ]) .sass('resources/sass/app.scss', 'public/css') //追加 .webpackConfig(require('./webpack.config')); |
sassの情報を追加することで、コンパイルの対象に追加されます。
上記の場合は、app.scssのデータをcssのフォルダ内にcssファイルとしてコンパイルするよという意味ですね。
いままでSassで行っていた場合は、これで同様に出来るようになります。
Laravel/uiからLaravel/Breezeに移行したときの注意点 おわりに
これまで普通に使っていたLaravel/uiですが、Breezeに移行したことでいくつかの細かい点が変わりました。
同じような悩みを持っている方の解決に少しでも貢献できれば幸いです。