この記事について
タイトルについてです。
Laravelについて学習していたときに様々なWebサイトを参考にさせていただきましたが、タイトルの対処に苦心しました。
私と同じケースの方の助けになれば幸いです。
要約
-
npm run devでpublicディレクトリにcssファイルが生成されず、BootstrapをBladeテンプレートに適用できませんでした。 - 新しいLaravel環境では、上記現象は仕様なようです。
- 新しいLaravel環境で*.blade.phpファイルで*.cssや*.jsを参照するには、
<head>タグ内に@vite('ファイルパス')を記述します。
私の環境
- Windows 11
- Powershell 7.2.6
- PHP 8.1.0
- Composer 2.1.14
- Laravel@9.20.0
- vite@2.9.14
- sass@1.54.5
- Bootstrap@5.2.0
前提
- Powershellで以下のコマンドを実行してtestプロジェクトを生成しました。
composer create-project laravel/laravel test
cd test
-
resources/views/bootstrap.blade.phpファイルを生成し、以下の様に記述しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrapのテスト</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<a href="https://getbootstrap.com/"><button class='btn btn-primary'>Bootstrapのボタン</button></a>
<body>
</html>
ディレクトリ構造(一部抜粋)
test
└node_modules
└public
└resources
現象
- 以下コマンドを実行しても、publicディレクトリにBootstrapのスタイルを含んだ*.cssファイルが生成されません。
composer require laravel/ui
php artisan ui bootstrap
npm install
npm run dev
※その時のファイル内を表す画像
-
resources/bootstrap.blade.phpファイルの<head>タグ内に以下文を記述しても、Bootstrapのスタイルが反映されません。
※1 その時のページ画面
※2ブラウザの開発者ツール>Networkでは目的のapp.cssの通信ステータスが404となっていることが確認できます。
原因
私の環境におけるフロントエンドビルドツールである「Vite」が、仕様上publicディレクトリにcssファイルをコンパイルしないためです。
Laravel 9.20.0 時点のデフォルトフロントエンドビルドツールは「Vite」です。
対処法
resources/views/bootstrap.blade.phpを以下のように書き換えます。
私の環境ではBootstrapのスタイルをSassで適用しているので、scssファイルを参照しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrapのテスト</title>
- <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+ @vite('resources/sass/app.scss')
</head>
<body>
<a href="https://getbootstrap.com/"><button class='btn btn-primary'>Bootstrapのボタン</button></a>
<body>
</html>
※実行後の画面(Bootstrapのスタイルが適用されています)
以上で解決しました。
以下公式ドキュメントを参考にしました。
アセットの構築（Vite） 9.x Laravel
スクリプトとスタイルの読み込み
へ追加する、@vite() Bladeディレクティブで参照するだけです。
Viteのエントリーポイントを設定したら、アプリケーションのルートテンプレートの
あとがきと謝辞
LaravelのBootstrap導入を解説する多くのサイト様は従来のLaravel Mixによる方法を紹介いただいていました。
どうやら最近のアップデートらしく、もしかしたらこの対処についてはなかなか共有されていないのではないでしょうか。私は初学者で、この変更にギャップを感じたのが記事を書き始めたけいいでｓ。
私と似た境遇の方へ、少しでも伴走ができれば光栄です。
私と同じ初学者の方へ、良きパートナーでありライバルです。ともに精進し、助け合えれば嬉しいです。
私の技術的先輩方へ、初めてQiitaに記事を投稿する者の拙い文です。内容に至らぬ点があれば躊躇いなくご指摘いただければ幸いです。
解説記事を書いていただいている皆様、いつもありがとうございます。私の学習に大いに役立っています。
また、公式ドキュメントを翻訳いただいている@hirokws様。貴方の貢献があって私の学習は継続されています。誠にありがとうございます。(僭越ながら寄付をさせていただきました。)