Angular Stackblitz：如何导入引导CSS框架

我刚刚发现了惊人的Stackblitz在线VS代码编辑器。 我创建了一个Angular项目，并在dependencies下安装了Bootstrap CSS框架，但是我应该如何将Bootstrap导入到我的项目中呢？ 通常，我会将这行代码添加到angular cli.json：

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

但是它在Stackblitz上是如何工作的呢

谢谢

在依赖项中添加“引导”，然后单击输入

然后在

src

文件夹中的styles.css中写入以下行

@import '~bootstrap/dist/css/bootstrap.min.css';

---

检查此StackBlitz示例：

它有一个angular-cli.json文件和一个style.css文件

angular-cli.json：

{
  "apps": [{
    "styles": ["styles.css"]
  }]
}

style.css：

@import "bootstrap/dist/css/bootstrap.min.css";

试试这个：

style.css

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')

它将加载angular.json中的所有glyphicon图标

：

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

对我来说很好

在以下位置打开样式文件：src/styles.css

添加此行：

@import url（'https://unpkg.com/bootstrap/dist/css/bootstrap.min.css');

单击屏幕左侧的依赖项菜单。有一个输入：“输入js/css cdn url”

写入：

https://code.jquery.com/jquery-3.3.1.slim.min.js

然后按enter键

写：

https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js

然后按enter键

---

现在，您可以使用大多数组件，如and等。

这是一个很老的问题，但无论如何，这对任何希望在Stackblitz中包含引导功能的人都是有帮助的

第1步： 转到app.module.ts并写入

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

Stackblitz将自动提示您安装ng引导模块

第二步： 在导入数组中添加NgbModule

imports:      [ BrowserModule, FormsModule, NgbModule ],

第三步： 在你的styles.css中

@import '~bootstrap/dist/css/bootstrap.min.css';

现在，您应该在您的角度项目中获得字形图标

在依赖项部分的输入包名输入字段中输入引导

将“node_modules/bootstrap/dist/css/bootstrap.min.css”添加到angular.json文件的样式部分

---

在src下的styles.css中添加以下代码行

@import url('https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css')

因此，要获得最新版本的引导，请访问

https://getbootstrap.com/docs/4.5/getting-started/introduction/

---

搜索CSS CDN链接，从该链接复制版本（在我的例子中是4.5.0），并用上面的导入语句替换它。

这似乎导入了引导CSS，但字体仍然丢失。因此，例如，glyphicon心形图标会产生一个空正方形。控制台的意思是：无法解码下载的数据。如果您使用Angular，则不应该使用boostrap，因为它依赖于jQuery，并且在Angular中使用jQuery是不好的做法。你需要使用他们称为ngBoostrap的角度版本。他们对第2步做了什么改变吗？它只是说“输入软件包名称”，当我输入URL时，我会得到“找不到软件包”@bersling，我自己也在想。你找到什么了吗？我在StackBlitz项目中只发现了一个问题：是否可以将cdnj文件包含到StackBlitz项目中？我无法使用“依赖项”菜单添加此文件：