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

Question

这是我的 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 样式的正确方法？

Answer 1

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

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

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

问候

Answer 2

您可以按照官方文档将 bootstrap 添加到 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

Answer 3

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

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

如何在 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?

bootstrap-4

ngx-bootstrap

angular

stackblitz