如何在 Angular 应用程序中集成 Bootstrap CSS答案

【问题标题】：How to integrate Bootstrap CSS in an Angular application如何在 Angular 应用程序中集成 Bootstrap CSS
【发布时间】：2018-02-07 17:05:06
【问题描述】：

我有两个类似的非常小的示例 Angular 应用程序，它们集成了 Bootstrap CSS。一个有效，一个我自己创建的无效。目前还不清楚有什么区别以及为什么它在我的情况下不起作用。

我的步骤如下：

npm install bootstrap --save

这会更新package.json，然后我更新index.html 并添加

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

与工作应用程序完全相同的行，但在我使用 ng new new-app 创建的示例应用程序中，它不起作用。

在 Angular 应用程序中集成 Bootstrap CSS 的正确/完整方法是什么？

【问题讨论】：

【解决方案1】：

看来您正在使用 angular & angular cli

如果是这种情况，那么您实际上可以将 bootstrap.css 文件添加到与 style 键对应的数组中的 .angular-cli.json 中，如下所示

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

另外两种可能性是使用@import 在主.css 文件中导入此bootstrap.css，或者您可以在主index.js 文件中要求它。

【讨论】：

【解决方案2】：

由于您使用的是 Angular-CLI：

更新您的 .angular-cli.json 文件以包含引导样式：

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

无需将其包含在您的 index.html 中

【讨论】：