将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上提问，我刚刚开始学习。提前感谢您的帮助。

- Vincent Bullock

---

你需要安装Icon Bootstrap。 - GRD

https://dev59.com/UVIH5IYBdhLWcg3wQLfr#62780730 - Eliseo

Answer 1

你需要这个：

npm install bootsrap

解决方案1：将其写入angular.json文件中。

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

解决方案2： 将Bootstrap导入到style.css中。

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

- mullern

---

我再次运行了npm并添加了那些代码行。我重新启动了ng serve。一切看起来和以前一样。它无法识别bootstrap类，我无法通过更改元素的类来插入图标。其他所有东西都像bootstrap。 - Vincent Bullock

我编辑了我的回答。请尝试解决方案2。 - mullern

对于图标，有单独的 CSS 文件可以在 node_modules/bootstrap 中查看。 - Prashant

Answer 2

最简单的将Bootstrap 5添加到您的项目中的方法是在index.html文件头部粘贴href链接。

- r1cly

Answer 3

这就是解决我的方法

事实证明，图标现在位于一个名为bootstrap-icons的不同模块中，您必须单独导入它。

- Vincent Bullock