如何安装Bootstrap 5并保留Bootstrap 4的原有配色方案

核心实现方法 #

Bootstrap 官方提供了v4 向后兼容样式包，你无需手动修改 Bootstrap 5 的核心文件，就可以直接还原 v4 的默认配色、圆角、边距等默认视觉规范：

• 如果你是通过 npm 等包管理器安装的 Bootstrap 5，只需要在你的样式入口文件中，引入 Bootstrap 自带的 v4 兼容 scss 文件即可，示例引入代码如下：
  @import "bootstrap/scss/v4-compat";
• 如果你是直接通过 CDN 引入样式，官方也提供了预编译好的 v4 兼容样式 CDN 资源，你只需要在 Bootstrap 5 核心 CSS 的引入语句之后，追加引入该兼容样式即可生效。

补充说明 #

• 该兼容包仅还原 v4 的视觉样式，不会兼容 v4 中已经废弃的类名、JavaScript 组件调用逻辑等语法层面的差异，如果你的项目中还有使用 v4 独有的语法，需要单独做语法兼容处理。
• 兼容样式的优先级高于 Bootstrap 5 默认核心样式，如果你需要自定义覆盖配色，需要保证自定义样式的权重不低于兼容包的样式权重。

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