Laravel 9.3.x 中使用 Vite 来构建Boostsrap5第一步：安装 Laravel UI compos

第一步：安装 Laravel UI

composer require laravel/ui

第二步：使用 bootstrap5

php artisan ui bootstrap

第三步：修改 vite.config.js

import { defineConfig } from 'vite'; 
import laravel from 'laravel-vite-plugin'; 
import path from 'path' 
export default defineConfig({ 
    plugins: [ 
        laravel([ 
            'resources/js/app.js', 
        ]), 
    ], 
    resolve: { 
    alias: { 
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), 
        } 
    }, 
});

第四步：在 js 中导入 bootstrap5 SCSS

resources/js/app.js 或 resources/js/bootstrap.js
import './bootstrap'; 
import '../sass/app.scss' 
import * as bootstrap from 'bootstrap'

第五步：加载 Scripts 和 Styles

<!doctype html>
<head>
    {{-- ... --}}

    @vite('resources/js/app.js')
</head>

第六步：编译、运行

npm install

运行 Vite 开发服务器...

npm run dev

构建并为生产环境版本化资产...

npm run build