Laravelとviteでbootstrap5を使いたい

初めに

今回Laravelとviteを利用してbootstrap5を利用したい状況となり、その手順をメモがてら投稿します

Laravel構築

いつも通りにlaravelをインストールする

comoser install 

bootstrapをインストール

laravelをインストール後にbootstrapをインストールする
bootstrapは5からnpmのインストールに対応しているからこの方法を選択

npm install bootstrap

設定

インストール後は幾つかのファイルを書き換えてLaravelでbootstrapが動作するようにする

vite.config.jsを以下の様に編集

+import path from 'path';

plugins: [
    laravel({
-        input: ['resources/css/app.css', 'resources/js/app.js'],
+        input: ['resources/scss/app.scss', 'resources/js/app.js'],
        refresh: true,
    }),
],
+resolve: {
+    alias: {
+        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
+    },
+}

次にrces配下のcssフォルダを削除しscssフォルダを作成
次にscssファイルを作成し次を記述

@import "~bootstrap/scss/bootstrap";

以上の様に設定をするとLaravelとviteを利用してbootstrap5利用出来る