没有使用 Angular 的 Bootstrap 呈现样式答案

【问题标题】：No styles rendered using Bootstrap for Angular没有使用 Angular 的 Bootstrap 呈现样式
【发布时间】：2018-02-05 13:17:41
【问题描述】：

我已经使用下面的命令安装了Ngb 和Bootstrap 4。当然，根模块也会导入包。

npm install @ng-bootstrap/ng-bootstrap --save
npm install bootstrap@next --save

在代码中，我尝试添加以下指令。然而，唯一呈现的是一个关闭十字按钮和我输入的文本 but 只是无聊 - 没有边框、框、颜色等。

<ngb-alert type="info">dsdsdds</ngb-alert>

不知道如何进一步排除故障，因为 googlearching 几乎没有产生任何问题。有什么建议吗？

【问题讨论】：

【解决方案1】：

在 angular.json（角度版本 6 及更高版本）或 angular-cli.json（角度版本低于 6）中添加引导程序依赖项。

例如对于角度版本 8，这目前对我有用

..
"styles": 
["./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]

您可能需要根据 node_modules 的位置更新参考。

我也偶然发现了这个问题，因为我错过了部分

安装以上依赖后

在文档中提到了 Angular 和 Bootstrap，并在故障排除时找到了这个页面。

使文档更清晰的建议是明确显示一个完整的示例，例如从 ng new 开始。

【讨论】：

【解决方案2】：

NgBootstrap 网站上的误导部分是他们只关注指令框架，而将样式全部留给开发人员。

所以，基本上，CSS 和/或 SCSS 似乎仍然应该由编码器提供。解决方案是自己设计样式，或者使用以下语句从 Bootstrap 的公共发行版中抢夺它们，这是非常明智且无疑更快的方法。

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

【讨论】：

我们从不建议用户制作自己的 CSS...我们的入门页面 (ng-bootstrap.github.io/#/getting-started) 清楚地将 Bootstrap 的 CSS 标记为依赖项。如果您对如何重新介绍介绍有任何建议，我们将不胜感激 PR to github.com/ng-bootstrap/ng-bootstrap/blob/master/demo/src/app/…
对。您必须自己包含引导 css 文件。如果您使用 angular cli，请考虑将 bootstrap 4 作为依赖项并将其包含到您的 angular-cli.json 中
@MeMeMax 是的，我先尝试过。但出于某种原因，它不想飞。所以我选择了 CDN 选项。无论如何，它是相同的数据负载（甚至更小，因为目标机器上可能已经存在 Booty）。或者你的意思是不同的？如果是这样，请随时发表回复。我强烈不喜欢接受我自己的答案。这很糟糕。
你可以像这样包含它（根据需要调整路径）： "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ]
@pkozlowski.opensource 我并不是要告诉你们如何编写文档。毕竟，可能是我的马虎背后没有足够正确和仔细地阅读。我只是说在我看来并不是“只有框架而不是颜色”，可以这么说。我认为我立即跳到了 installation ——我的脑海中过滤了对依赖项的引用，将其过滤为“包含在安装中”。另外 - 感谢伙伴的软件。我已经很享受使用它了。 :)