Laravel 5.6升级后Bootstrap v3.3.7版本过低，如何升级？

嘿，我完全懂你遇到的困扰——升级Laravel后端版本时，前端依赖（比如Bootstrap）并不会跟着Composer自动更新，毕竟Composer只管PHP包，前端资源是由npm/yarn单独管理的。下面是一步步帮你把Bootstrap升级到新版本的实操方法：

1. 更新前端依赖配置 #

先打开项目根目录下的package.json文件，找到dependencies区块里的Bootstrap相关条目。Laravel 5.5默认用的是bootstrap-sass（对应Bootstrap 3），你需要把它替换成最新的Bootstrap 4+版本（和你新建Laravel项目用的版本保持一致），同时记得添加popper.js——Bootstrap 4及以上版本需要它来处理弹窗、下拉菜单这类交互。修改后的配置大概是这样：

"dependencies": {
    "jquery": "^3.4.1",
    "popper.js": "^1.16.0",
    "bootstrap": "^4.4.1"
}

注意：如果原来的配置里有bootstrap-sass，直接删掉这个条目，换成上面的bootstrap即可。

2. 重新安装前端依赖 #

为了避免旧依赖的冲突，先删除旧的依赖包和锁文件：

rm -rf node_modules
rm package-lock.json # 如果你用yarn的话就删yarn.lock

然后重新安装新的依赖：

npm install
# 或者用yarn的话执行：yarn install

3. 调整Bootstrap的导入文件 #

Laravel用Mix来编译前端资源，所以需要修改两个核心导入文件：

3.1 调整JS导入（resources/assets/js/bootstrap.js） #

原来的文件里可能是导入bootstrap-sass，现在改成导入官方的Bootstrap JS，并且确保Popper和jQuery在Bootstrap之前导入：

window._ = require('lodash');
window.Popper = require('popper.js').default; // 新增这行，注意加上.default
window.$ = window.jQuery = require('jquery');
require('bootstrap'); // 替换原来的require('bootstrap-sass')

3.2 调整SCSS导入（resources/assets/sass/app.scss） #

把原来导入bootstrap-sass的语句替换成Bootstrap 4的SCSS入口：

// 原来的语句可能是：@import 'bootstrap-sass/assets/stylesheets/bootstrap';
@import 'bootstrap/scss/bootstrap';

4. 重新编译前端资源 #

现在执行Mix的编译命令，生成新的app.css和app.js文件：

npm run dev # 开发环境用这个，编译速度快，带sourcemap方便调试
# 生产环境的话用：npm run prod，会压缩代码

5. 处理兼容性问题 #

这里要提醒你：Bootstrap 4和3的类名、组件结构有不少变化，比如btn-default改成了btn-secondary，导航栏navbar的结构也做了调整。所以你原来的Blade视图文件可能需要对应修改，不然会出现样式错乱或者交互失效的情况。建议先备份视图文件，再逐步调整适配。

如果编译过程中遇到报错，先检查package.json里的依赖版本是否兼容，比如jQuery的版本不要太新，和Bootstrap 4匹配即可。

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