カテゴリー
Linux

Laravel 8 の Vue.js 3 の SPA に laravel/ui を使わないで Bootstrap 5 を導入するまでのメモ

Laravel 8 の Vue.js 3 の SPA に laravel/ui を使わないで Bootstrap 5 を導入してテスト表示

まとめ

Bootstrap 5 導入メモ

npm install --save-dev bootstrap @popperjs/core

laravel/resources/js/bootstrap.js で Bootstrap5 を読み込むために次を追加。

require('bootstrap');

laravel/resources/sass/_variables.scss を作成しておき、 Bootstrap5 をカスタマイズしたくなったらこのファイルに書くようにする。下記ファイルのコメントを外して npm build するとウェブブラウザで表示した時に背景が変わるはず。

//$body-bg: #000;

laravel/resources/sass/app.scss で Bootstrp5 の SCSS 読み込み。このファイルで Bootstrap5 のカスタマイズも可能になる。

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

laravel/webpack.mix.js で npm build 時に入力の SCSS と出力先を指定する。

 .sass('resources/sass/app.scss', 'public/css')
 .sourceMaps();

Bootstrap 5 をカスタマイズ可能にする際の注意点

NPM 依存パッケージを追加でインストールする必要がありました。

  • sass-loader@^12.1.0
  • sass
  • resolve-url-loader@^5.0.0

以下、経緯です。

laravel/webpack.mix.js

.sass('resources/sass/app.scss', 'public/css')

ビルドしてみると、 npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps を実行して追加のパッケージをインストールするように促されました。

app@eafcef814c18:/var/www/html/laravel$ npm run watch

> watch
> mix watch

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install sass-loader@^12.1.0 sass resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps
 
        Finished. Please run Mix again.
 
app@eafcef814c18:/var/www/html/laravel$

Bootstrap 5 の導入を、 laravel/ui と比較する。

laravel/ui: Laravel UI utilities and presets. の次の部分を参考にすることで、スムースに導入することができました。

おわりに

今回、 laravel/ui そのものは使わず、手作業で Bootstrap 5 を導入しました。その後に laravel/ui で Bootstrap 5 を導入してみて差分を確認、という形で進めました。

laravel/ui は基本的にファイルをコピーして上書きするだけです。ですので、コピー後は laravel/ui は削除して、コピーしたファイルをカスタマイズする、というやり方が効率的かと思います。Laravel 9 などで同じことを行うときは、やってみようかと思いました。

コメントを残す