Bootstrap 从 v4.3 升级到 v5 破坏了整个应用程序 css

Question

我有一个 Angular 14 上的 Angular 应用程序，它使用 bootstrap 和 SCSS 编译为 node-sass/SASS 包。它还使用 ng-bootstrap v11 和 bootstrap v4.3.1 作为 css 样式。作为常规升级的一部分，我必须将 Angular 版本从 v14 升级到 15。在此过程中，我必须将 ng-bootstrap 升级到 v14，并将其依赖项 bootstrap 升级到 v5.2。我不得不重新引入一些已弃用的 mixin/函数。在完成其他相关的构建问题后，我能够成功构建角度应用程序。

当我在浏览器中看到该应用程序时，整个CSS已被修改。整个应用程序看起来就像放大的浏览器。字体大小、样式都改变了。还有其他用户界面问题。引导程序的响应特征表现完全不同。

从引导站点，我可以看到它已破坏更改的文档。 https://getbootstrap.com/docs/5.0/migration/

我想知道是否有办法在不破坏整个scss/css的情况下将bootstrap v4.3.1升级到v5.2。

如有任何帮助，我们将不胜感激。

Answer 1

简短的回答是不。您无法自动从 Bootstrap v4 升级到 v5。

Bootstrap 不提供迁移工具，例如 Angular 那样。

无论如何，我看到3种不同的选择来解决你的问题：

1. 根据您提供的文档手动更改和重写所有样式从v4到v5（最佳选择）
2. 考虑不迁移
到新版本的 Angular
3. 从项目中删除 ng-bootstrap 并全局安装 bootstrap v4 样式 （这不是最佳实践，它很可能会造成伤害，我很确定你将不得不重写部分代码）

Answer 2

我创建了一个命令行脚本，它将模板/页面从 Bootstrap 4 项目升级到 Bootstrap 5。它使用 gulp 和 gulp-replace 来替换 HTML 页面/模板文件夹中的类名。

• 用重命名的 Bootstrap 5 类名替换所有 Bootstrap 4 类名
• 用实用程序类替换已弃用的组件（例如

  .jumbotron

  和

  .media

  ）
• 将所有数据属性（例如

  data-toggle

  和

  data-target

  ）重命名为新名称
• 将所有 Bootstrap v4 CDN 链接（cloudflare、jsdelivr、stackpath.bootstrapcdn.com 和 unpkg）更新为最新版本的 Bootstrap v5
• 覆盖现有文件或将迁移的文件保存到其他文件夹的选项
• 不仅可以转换HTML文件，还可以转换ASP、CSHTML、EJS、ERB、HBS、JSP、PHP、VUE等模板文件
• 提供所做更改的摘要

它是免费且开源的： https://github.com/coliff/bootstrap-5-migrate-tool

希望对您有所帮助！