Bootstrap 5 样式无法与 Angular 16 一起正常工作

Question

问题出在我的 angular.json 中，我像这样声明了我的样式。

 "styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", "bundleName": "ltrCSS" }, { "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css", "bundleName": "rtlCSS" }, "src/[FOLDER]/styles.css", "src/[FOLDER]/rtlcustomstyle.css" ],

当我为产品构建我的网站时，它会产生两种额外的样式，但当我在本地构建它时，它没有任何错误。 本地构建 产品构建

我尝试过混合和匹配代码以及样式的排名，但它仍然不起作用。正如您在 css 文件下面看到的，它有一个额外的

<style>...</style>

它的内容正是 bootstrap.min.css 中的内容

Answer 1

我在最新的 Angular 版本中使用 bootstrap 5。 我的步骤如下： 1（终端）。 ng 添加@ng-bootstrap/ng-bootstrap 2（angular.json => 添加到第一个样式元素）。 “node_modules/bootstrap/dist/css/bootstrap.min.css”， 3（通过输入ctrl + c然后ng服务重新启动终端）。