【23年9月】Laravel10+ViteへのBootstrap導入手順

実行環境

OS	macOS Ventura 13.5
shell	zsh 5.8.1 (x86_64-apple-darwin21.0)
framework	laravel(10.20.0)
	vite(4.4.9)

検証日: 2023/09/25

本記事で得られる結果

• Laravel10 + Vite環境にて利用できるようになる
  • Bootstrap
  • Bootstrap-icons

事前準備

• Dockerがインストール済みであること
• Laravelの環境構築済みであること

手順

Bootstrap本体

1. laravel-ui のインストール

   sail composer require laravel/ui
   

2. bootstrap のインストール

   sail artisan ui bootstrap
   

   --auth を付加すると Bootstrap ベースのテンプレートが生成される

3. 追加パッケージのインストール

   sail npm install
   

4. (補足) Paginator にも Bootstrap を利用するように追記

   app/Providers/AppServiceProvider.php

   + use Illuminate\Pagination\Paginator;
   

   app/Providers/AppServiceProvider.php

   public function boot()
   {
   +    Paginator::useBootstrap();
   }
   

Bootstrap Icons

1. bootstrap-icons のインストール

   sail npm install bootstrap-icons
   

2. Vite から参照するために app.scss へ import 追記

   resource/sass/app.scss

   + // Bootstrap-icons
   + @import 'bootstrap-icons/font/bootstrap-icons.css';
   

参考資料

備考

これだけでは Vite に最適化されているとは言えないと思われるので、もうひと工夫できるはず