Laravel 10.x + ViteでBootstrapを使う

まずはよくある手順通りに準備

# プロジェクトの作成
composer create-project --prefer-dist laravel/laravel sample-app
cd sample-app

# laravel/uiのインストール
composer require laravel/ui

# Bootstrapの有効化
php artisan ui bootstrap

# Bootstrap等のインストール
npm i

ここが違う

公式ではblade.phpでのリソースの読み込みのコードとして以下のように書かれています。

@vite(['resources/css/app.css', 'resources/js/app.js'])

しかし、上記の手順で/vite-config.jsには以下のように書かれます。

input: [
    'resources/sass/app.scss',
    'resources/js/app.js',
],

/resources/css/app.cssは空なので、もちろんBootstrapは読み込まれません。

つまり、以下のようにリソースを読み込みます。

@vite(['resources/sass/app.scss', 'resources/js/app.js'])

参考