如何在 stackblitz.com 中使用 ngx-bootstrap 而不使用 <link href> 来导入 bs css？答案

【问题标题】：How to use ngx-bootstrap in stackblitz.com without use a <link href> to import bs css?如何在 stackblitz.com 中使用 ngx-bootstrap 而不使用 <link href> 来导入 bs css？
【发布时间】：2019-06-28 16:48:28
【问题描述】：

这是我的 stackblitz.com 演示： https://stackblitz.com/edit/ngx-bs-test

我需要将<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> 添加到我使用的每个 html 文件中。

我已经完成了官方文档所说的所有事情，安装依赖项，将"node_modules/bootstrap/dist/css/bootstrap.min.css",添加到angular.json .但只是没有显示样式。

谁能告诉我在 stackblitz 中使用 ngx-bootstrap 样式的正确方法？

【问题讨论】：

如果你想导入正常的引导然后使用@import 'bootstrap/dist/css/bootstrap.min.css';将css导入你的根样式表（style.css），而不是在npm i bootstrap之后添加到angular.json

标签： angular bootstrap-4 ngx-bootstrap stackblitz

【解决方案1】：

您可以按照官方文档并将引导程序添加到angular.json 中

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

https://stackblitz.com/edit/ngx-bs-test-mc1rqy?file=angular.json

【讨论】：

好吧，在逐行比较你和我的代码后，我发现我只是在` "src/styles.css"` 后面多了一个逗号，太愚蠢了...
是的，这个小错误会造成大问题并浪费很多时间：D

【解决方案2】：

你可以像这样更新你的 index.html：

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

<my-app>loading</my-app>

问候

【讨论】：

【解决方案3】：

npm i bootstrap 然后编辑 angular.json 文件

"architect": {
  "build": {
     "options": {
         "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
          ],
     }  
  }
}

【讨论】：