⇨ Laravel 記事の目次はこちら

Laravel で Bootstrap が使えない時の対処方法について、まとめました。

はじめに

Laravel6 やそれ以前のバージョンでは、Bootstrap は最初から使えるように設定されています。

その Bootstrap が、

1. 最初のページでは使える
2. 追加したページで使えない

 というときであったり、

そもそもBootstrapがなぜ使えるのかよく分からない人

向けの記事となります。

最初のページでは使えるが、新しく追加したページで使えない

これは、Bootstrap が入っている CSS や JS ファイルを

1. 最初のページでは読み込んでいるが

2. 新しく追加したページでは読み込んでいない

ことが原因となります。

この、Bootstrap が入っている CSS や JS ファイルは、具体的にいうと、

1. public/js/app.js
2. public/css/app.css

となります。

最初のページは、初期設定では welcome.blade.php なので、それをみていきます。

welcome.blade.php

このファイルでは、どこで読み込んでいるのでしょうか？

一番上の方でこのような記述があります。

extends('layouts.app')

この extends というのは、Laravel の共通テンプレートを使うことを定義しています。

それでは、共通テンプレートはどこにあるのでしょうか？

layouts.app は、resources/views から見たパスなので、

resources/views/layouts/app.blade.php にあります

これは、初期状態のテンプレートのファイルの場所となります。

このファイルの head タグの中には、

<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />

上記のように、app.css や app.js を読み込む記述があることが分かります。

なので、Bootstrap を使うことができるわけです。

そもそもどこのページでも、Bootstrap が使えないとき

まず、右クリック ⇨ 検証でデベロッパーツールを開き、コンソールを見ましょう。

そのとき、app.css や app.js が 404 になっていたら、次のコマンドを打って見てください。

npm run watch

または、

npm run dev

を打ってみてください。

public/css/app.css と public/js/app.js

が生成されたので使えると思います。

詳しくは、

Laravel で app.js や app.css が 404NOT FOUND するときの解決方法

こちらの記事で解説しています。

そもそも bootstrap が使う設定では無い可能性がある

なぜ bootstrap が使えるかというと、bootstrap がインストールされており、それを使ってビルドするような設定がもともと書いてあるからです。

resources/js/app.js

require("./bootstrap")

resources/js/bootstrap.js

require("bootstrap")

package.json（中身は Laravel のバージョンなどによります）

"bootstrap": "??.?.?"

このように、もともと記述があります。

記述がないときは？

記述がないと Bootstrap は使えません。

可能性としては、Laravel8 など、Bootstrap が標準搭載ではなくなっているため、その記述がなくなっている可能性があります。

Laravel8 以降は Tailwind を使うような流れがあるため、そういうパターンでは、無理矢理 Bootstrap ではなく、Tailwind を使った方が良いのではないかなと思います。

まとめ

以上です。

Laravel で Bootstrap が使えない時に確認してみて欲しい内容についてまとめてみました。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。

それでは！

人気記事

PHP7.4 ＋ Laravel6 のプロジェクトを AWS EC2 にデプロイする

【laravel-breadcrumbs】Laravel でパンくずリストを実装する