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

Question

我有两个类似的非常小的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创建的示例应用程序中它不起作用。

Chrome中的网络标签显示404.基本上找不到网址http://localhost:4200/node_modules/bootstrap/dist/css/bootstrap.min.css。

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

Answer 1

好像你正在使用角度和放大器角度cli

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

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

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

Answer 2

由于您使用的是Angular-CLI：

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

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

无需将其包含在index.html

中