Laravel10でBootstrapが反映されない

こんにちは!トビログ管理人のとびおです!今回はLaravel 10にてBootstrapが反映されない問題について解決していきたいと思います!

とびうお<br>
とびうお

当ブログではLaravelの様々な機能を
紹介しています。他の記事も是非ご覧ください!

Bootstrapを読み込む方法は2つある

まず大事なことはLaravel10にてBootstrapを読み込む方法は2つあるということです。

それは「CDN」で読み込む方法「Laravel UI」でインストールする方法です。

とびうお<br>
とびうお

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が反映されない
Laravel 10にてBootstrapが反映されない

このようにすれば、Bootstrapが反映されるようになるはずです。

とびうお<br>
とびうお

CDNを使えばとても簡単にBootstrapを導入できるので、ほかに支障がなければCDNを使うと楽です!

Laravel UIでインストールする

こちらはちょっとめんどくさいですが、そこまで大変ではないです。

まずLaravelのところで以下のコマンドを打ちます。

composer require laravel/ui

もし、sailを使っている場合は

sail composer require laravel/ui

です。

とびうお<br>
とびうお

自分がどの方法で環境構築したのかはとても大事なので、覚えておきましょう。
公式のLaravel10の場合はsailを使っているはずです。

このコマンドを打つと php artisan ui のコマンドが使えるので、そこでBoostrapをインストールします。

php artisan ui bootstrap

sailを使っている方はこちらのコマンドです。

sail php artisan ui bootstrap
とびうお<br>
とびうお

ここまでエラーがなければインストールは完了しているはず!

その次に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>
とびうお

npm run devでコンパイルしたcssをここでは読み込んでいるよ!

まとめ

以上、BootstrapがLaravel10で使えない時の対策です。とりあえず使いたい!というのであればCDNでインポートしてしまうほうが楽な気がします。

とびうお
ブログ管理人です!
swimaneというアプリをリリースしました!

コメント

タイトルとURLをコピーしました