大型Laravel项目中如何更换Bootstrap版本？

前置准备 #

• 先备份项目代码及依赖配置文件（package.json、webpack.mix.js/vite.config.js），防止操作失误无法回滚。
• 确定目标Bootstrap版本（推荐稳定版Bootstrap 5），以下操作以升级到Bootstrap 5为例。

一、针对使用Laravel Mix的项目（Laravel 8及更早版本） #

1. 移除旧依赖
   进入项目根目录，执行命令卸载Bootstrap 3及关联的jQuery依赖：

   npm uninstall bootstrap@3 jquery popper.js
   

2. 安装新版本依赖
   安装Bootstrap 5及所需的Popper.js：

   npm install bootstrap@5 @popperjs/core
   

3. 更新资源配置文件

   • 打开resources/sass/app.scss，替换原Bootstrap 3的导入语句：

     // 移除原Bootstrap 3导入代码，替换为
     @import "~bootstrap/scss/bootstrap";
     

   • 打开resources/js/app.js，更新Bootstrap JS的引入：

     // 移除原jQuery、Bootstrap 3的引入代码，替换为
     import 'bootstrap';
     

   • webpack.mix.js保持原有基础配置即可，无需额外修改。

4. 重新编译资源
   执行编译命令生成新的前端资源：

   npm run dev
   # 生产环境使用 npm run prod
   

二、针对使用Vite的项目（Laravel 9及以上版本） #

1. 移除旧依赖
   执行命令卸载Bootstrap 3及关联依赖：

   npm uninstall bootstrap@3 jquery popper.js
   

2. 安装新版本依赖
   安装Bootstrap 5和Popper.js：

   npm install bootstrap@5 @popperjs/core
   

3. 更新资源引入配置
   打开resources/js/app.js，替换原Bootstrap 3的引入代码：

   // 移除原Bootstrap 3相关引入，替换为
   import '../css/app.css';
   import 'bootstrap/dist/js/bootstrap.js';
   

   再打开resources/css/app.css，添加Bootstrap样式导入：

   @import 'bootstrap/dist/css/bootstrap.css';
   

4. 重新构建资源
   执行命令生成新资源文件：

   npm run dev
   # 生产环境使用 npm run build
   

三、处理代码兼容问题（核心环节） #

Bootstrap 3到5的类名、组件结构、JS逻辑变化较大，必须逐一排查项目页面：

• 类名替换：如btn-default改为btn-secondary，panel组件替换为card，navbar-default改为navbar-light/navbar-dark搭配bg-*背景类。
• JS逻辑调整：Bootstrap 5不再依赖jQuery，原基于jQuery的组件调用（如模态框、下拉菜单）需替换为Bootstrap 5原生API；部分组件（如Tooltip、Popover）需手动初始化。
• 响应式布局检查：Bootstrap 5的断点细节有调整，需验证页面在不同屏幕尺寸下的显示效果。
• 自定义样式适配：项目中基于Bootstrap 3写的自定义CSS，需调整选择器以适配新的类名结构。

建议先在测试环境完成升级，逐一验证功能与样式，修复问题后再部署到生产环境。

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