こんにちは!トビログ管理人のとびおです!今回はLaravel 10にてBootstrapが反映されない問題について解決していきたいと思います!
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
当ブログではLaravelの様々な機能を
紹介しています。他の記事も是非ご覧ください!
Bootstrapを読み込む方法は2つある
まず大事なことはLaravel10にてBootstrapを読み込む方法は2つあるということです。
それは「CDN」で読み込む方法と「Laravel UI」でインストールする方法です。
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
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>
![Laravel10でBootstrapが反映されない](https://i0.wp.com/tobilog.net/wp-content/uploads/2022/12/image-10.png?resize=1024%2C525&ssl=1)
このようにすれば、Bootstrapが反映されるようになるはずです。
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
CDNを使えばとても簡単にBootstrapを導入できるので、ほかに支障がなければCDNを使うと楽です!
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
Laravel UIでインストールする
こちらはちょっとめんどくさいですが、そこまで大変ではないです。
まずLaravelのところで以下のコマンドを打ちます。
composer require laravel/ui
もし、sailを使っている場合は
sail composer require laravel/ui
です。
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
自分がどの方法で環境構築したのかはとても大事なので、覚えておきましょう。
公式のLaravel10の場合はsailを使っているはずです。
このコマンドを打つと php artisan ui のコマンドが使えるので、そこでBoostrapをインストールします。
php artisan ui bootstrap
sailを使っている方はこちらのコマンドです。
sail php artisan ui bootstrap
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
ここまでエラーがなければインストールは完了しているはず!
その次にnpm installをして、npm run devをします。
npm install
sailの方↓
sail npm install
そしてnpm run devをします
npm run dev
sailの方↓
sail npm run dev
なお、npm run devが何をしているかわからない方は以下の記事を読むことをおすすめします。
ここまでで、laravel上にbootstrapがインストールされました。
インストールがされたら、次はbladeで定義します。cdnで定義した時と同じようにbladeのヘッダーに以下の記述をします。
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
![とびうお<br>](https://i0.wp.com/tobilog.net/wp-content/uploads/2021/01/C68848CD-D4C5-460B-B744-BEFA75315F89.jpg?resize=300%2C300&ssl=1)
npm run devでコンパイルしたcssをここでは読み込んでいるよ!
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www16.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www12.a8.net/0.gif?resize=1%2C1&ssl=1)
![](https://i0.wp.com/www19.a8.net/0.gif?resize=1%2C1&ssl=1)
まとめ
以上、BootstrapがLaravel10で使えない時の対策です。とりあえず使いたい!というのであればCDNでインポートしてしまうほうが楽な気がします。
コメント