如何将通过YARN安装的Bootstrap 4升级到Bootstrap 5

1. 包版本升级 #

首先卸载旧版Bootstrap及对应依赖，避免版本冲突：

yarn remove bootstrap popper.js

Bootstrap 5不再依赖旧版popper.js，改用新版@popperjs/core，执行命令安装新版依赖：

yarn add bootstrap @popperjs/core

如果需要使用Bootstrap官方图标库，可额外安装：

yarn add bootstrap-icons

2. 项目引用调整 #

• 直接引入打包好的CSS/JS文件的场景，原有引入路径基本不变，确认入口文件的引入语句正常即可：

  import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap/dist/js/bootstrap.min.js'
  

• 通过Sass源码引入自定义样式的场景，需要注意Sass文件的导入路径、变量命名、映射规则的变更，逐一调整你自定义的覆盖变量。

3. 破坏性变更适配 #

Bootstrap 5和4存在大量不兼容的设计，需要根据你的项目使用情况逐一调整：

• 栅格系统移除了xs断点后缀，原.col-xs-*类直接改为.col-*即可
• 表单类统一更名，原.custom-*开头的表单自定义类全部改为.form-*开头，比如.custom-control调整为.form-check
• 移除了jQuery依赖，原有用jQuery调用Bootstrap组件的写法（比如$('.modal').modal()）需要替换为Bootstrap 5原生JS API
• 多个组件被移除，包括jumbotron、page-header、media、well等，需要改用Flex、间距、背景等通用工具类拼接实现对应效果
• 大量组件类名调整，比如卡片、导航、下拉菜单的部分类名有变更，用到对应组件的位置需要逐一核对调整

4. 兼容性验证 #

升级完成后全量测试项目所有页面的样式与交互功能，重点检查模态框、下拉菜单、弹出提示、轮播图等交互组件是否正常运行，样式是否存在错位偏差。如果你的项目依赖了其他基于Bootstrap 4开发的第三方组件库，需要先确认对应库是否有支持Bootstrap 5的版本，避免出现依赖冲突。

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