Laravel

LaravelでのBootstrap5の導入

ここではLaravelにBootstrapをインストールする方法について解説します。
多機能なLaravel UIを使う方法と、Bootstrapだけをインストールする方法があります。

実行確認環境
Laravel 9.5.1

Contents
  1. A. Laravel UIを使う場合
  2. B. Bootstrapのみをインストールする（Laravel UIを使わない）場合

A. Laravel UIを使う場合

特にこだわりなどがなければこちらでいいかと思います。
色々な設定を自動でやってくれ、簡単に導入することができます。

$ composer require laravel/ui

Laravel UI のインストールが完了したらartisanコマンドを実行します。
（余談ですが、bootstrap以外にもvueやreactのインストールもできます。）

$ php artisan ui bootstrap

Please run "npm install && npm run dev" to compile your fresh scaffolding.

と出るので

$ npm install && npm run dev

を実行します。
1回目でエラーになることがあるようですが、再度実行すれば通ることが多いです。
もし再度実行しても通らない場合でも、メッセージを読むと解消できることが多いです。

Laravel UIにより、すでに
webpack.mix.js
も自動で書き換えられており、npm run devをしたことで
public/css/app.css
も自動で生成されています。

resources/sass/app.scss

が生成されているので、こちらを編集してnpm run devを実行するとコンパイルできます。

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

で読み込むともう利用できる状態になっています。
Laravel UIを使う場合はこれで完了です！

B. Bootstrapのみをインストールする（Laravel UIを使わない）場合

すでに型ができており余計なものをいれたくない、などLaravel UIをいれたくない理由がある場合はこちらになります。

Bootstrap5のインストール

$ npm -v
でバージョンが表示され、npmがインストールされていることを確認しましょう。

Laravelをインストールしたディレクトリ($ lsしてpackage.jsonなどが表示されるディレクトリ)にて

$ npm install
$ npm install bootstrap

を実行します。
正式版がリリースされたため、上記コマンドでもbootstrap5がインストールされるようになっていました。

これで公式にあるような

└── node_modules/
    └── bootstrap
        ├── js
        └── scss

という構造ができあがります。

Laravel Mixの設定

Laravel Mixはデフォルトでpackage.jsonに記載されているため、先程のnpm installにてすでにインストールはされているはずです。
設定は同じくLaravelのディレクトリにデフォルトで存在するwebpack.mix.jsにて行います。

デフォルトでは

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

という記述になっているかと思いますが、postCssはいらないので削除し、

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/scss/custom.scss', 'public/css');

と書き換えます。
resourcesディレクトリ配下にscssというディレクトリを作成します。
上記ではcustom.scssというファイル名を指定しているのでcustom.scssというファイルをresources/scss配下に作成しましょう。
もちろん設定と一致していれば任意の名前でOKなのでapp.scssなどでも大丈夫です。

custom.scssには下記を記述し、bootstrapを読み込みます。これはすべて読み込みますが、オプションで必要なものだけ読み込む方法もあります。（詳しくは公式）

@import "../../node_modules/bootstrap/scss/bootstrap";

Laravelの場合はresourcesディレクトリの分階層が1つ深いので、Bootstrap公式より1階層多く上がっています。

$ npm run dev でコンパイルがされます。

ちなみに私の環境ではエラーがでたので

$ npm cache clear --force
$ npm install

でインストールし直してからnpm run devを再実行しました。

成功するとpublic/cssディレクトリ配下にながーいcustome.cssが出力されているはずです。

あとはSCSSを記述していくだけです！

参考：
公式 https://getbootstrap.jp/docs/5.0/customize/sass/
https://coliss.com/articles/build-websites/operation/work/bootstrap-5-tutorial-without-jquery.html

-Laravel
-,