こんにちは！トビログ管理人のとびおです！今回はLaravel 10にてBootstrapが反映されない問題について解決していきたいと思います！
当ブログではLaravelの様々な機能を
紹介しています。他の記事も是非ご覧ください！
Bootstrapを読み込む方法は2つある
まず大事なことはLaravel10にてBootstrapを読み込む方法は2つあるということです。
それは「CDN」で読み込む方法と「Laravel UI」でインストールする方法です。
CDNで読み込む方法はかなり簡単ですが
おそらくLaravel UIで読み込むのが一般的…?
まず簡単なCDNで読み込む方法を説明していきます。
CDNで読み込む方法
まずCDNで読み込む方法ですが、bladeのヘッダのところに以下の記述を追加するだけです。(2022/12/05現在)
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
このようにすれば、Bootstrapが反映されるようになるはずです。
CDNを使えばとても簡単にBootstrapを導入できるので、ほかに支障がなければCDNを使うと楽です！
Laravel UIでインストールする
こちらはちょっとめんどくさいですが、そこまで大変ではないです。
まずLaravelのところで以下のコマンドを打ちます。
composer require laravel/uiもし、sailを使っている場合は
sail composer require laravel/uiです。
自分がどの方法で環境構築したのかはとても大事なので、覚えておきましょう。
公式のLaravel10の場合はsailを使っているはずです。
このコマンドを打つと php artisan ui のコマンドが使えるので、そこでBoostrapをインストールします。
php artisan ui bootstrapsailを使っている方はこちらのコマンドです。
sail php artisan ui bootstrapここまでエラーがなければインストールは完了しているはず！
その次にnpm installをして、npm run devをします。
npm installsailの方↓
sail npm installそしてnpm run devをします
npm run devsailの方↓
sail npm run devなお、npm run devが何をしているかわからない方は以下の記事を読むことをおすすめします。
ここまでで、laravel上にbootstrapがインストールされました。
インストールがされたら、次はbladeで定義します。cdnで定義した時と同じようにbladeのヘッダーに以下の記述をします。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">npm run devでコンパイルしたcssをここでは読み込んでいるよ！
まとめ
以上、BootstrapがLaravel10で使えない時の対策です。とりあえず使いたい！というのであればCDNでインポートしてしまうほうが楽な気がします。
swimaneというアプリをリリースしました！
コメント