如何在Laravel 9+Breeze+Vite项目中使用Bootstrap

步骤1：安装Bootstrap及依赖 #

通过npm安装Bootstrap和它的必要依赖@popperjs/core：

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

步骤2：配置Vite资源导入 #

打开项目的resources/js/app.js文件，添加以下导入代码：

// 导入Bootstrap的JavaScript组件
import * as bootstrap from 'bootstrap';
// 导入Bootstrap的默认CSS
import 'bootstrap/dist/css/bootstrap.min.css';

如果需要自定义Bootstrap样式（比如修改主题色、间距），可以创建resources/css/app.css文件，写入自定义变量和Bootstrap源SCSS：

// 自定义Bootstrap变量（示例：修改主色调）
$primary: #2563eb;

// 导入Bootstrap完整SCSS源文件
@import 'bootstrap/scss/bootstrap';

然后在app.js中替换之前的CSS导入，改为导入自定义的app.css：

import '../css/app.css';

步骤3：确认Blade模板的资源引入 #

打开Breeze的主布局文件resources/views/layouts/app.blade.php，确保已包含Vite的资源指令（Breeze默认已添加，只需确认路径正确）：

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

步骤4：编译资源 #

执行对应命令编译前端资源：

• 开发环境（实时热更新）：

npm run dev

• 生产环境（压缩优化）：

npm run build

额外说明 #

• 该方式完全保留Breeze原有的Vue/Blade结构，无需替换任何文件，仅通过Vite将Bootstrap整合到项目中。
• 使用Bootstrap的JS组件时，直接用官方的data-bs-*属性即可触发（如下拉菜单的data-bs-toggle="dropdown"），无需额外手动初始化。

内容的提问来源于stack exchange，提问作者Ahmed Hasnain