将 Bootstrap 5 添加到 Angular 13

Question

我想将 bootstrap 添加到 angular。具体来说，我在使用

之类的代码显示库中的图标时遇到问题

<i class="bi bi-star"></i>

我添加了行

              "./node_modules/bootstrap/dist/css/bootstrap.css"

在 angular.json 中。我还添加了

@import "~bootstrap/dist/css/bootstrap.css";

在 styles.scss 中。 bootstrap的一些功能已经在应用程序上实现，例如按钮的格式，但它无法识别bootstrap 类。

我希望我说的很清楚。我刚刚开始，这是我对 SO 的第一个查询。提前致谢。

Answer 1

你需要这个：

npm install bootsrap

解决方案一：写到angular.json

"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"],
"scripts": ["node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]

方案二：将 bootstrap 导入到 style.css

@import "~bootstrap/dist/css/bootstrap.css";

Answer 2

原来图标现在位于另一个名为 bootstrap-icons 的模块中，您必须单独导入它。

Answer 3

将 Bootstrap 5 添加到您的项目的最简单方法是将 href 粘贴到 header 上的 index.html。

Adding Bootstrap 5 to Angular 13