将引导程序添加到 Angular 8答案

【问题标题】：Adding Bootstrap to Angular 8将引导程序添加到 Angular 8
【发布时间】：2020-08-19 08:08:55
【问题描述】：

我正在尝试将 Bootstrap 添加到我的 Angular 应用程序中。我是新手，尽管按照所需的步骤安装引导程序时遇到问题。

我完成了安装 Angular cli、ng new first-app 和 ng serve 的所有必要步骤。
我打开了 vs code 终端并尝试使用
安装引导程序
npm install bootstrap --save
然后在 style.css 中添加这个

@import "~bootstrap/dist/css/bootstrap.css"

但是当我点击悬停在上述代码上的链接时，它仍然显示无法找到文件并提示使用此路径创建文件。

【问题讨论】：

标签： javascript jquery css angular frontend

【解决方案1】：

欢迎来到 StackOverflow！

Bootstrap 不是 TypeScript 代码，因此您不要这样导入它。相反，它是 CSS 代码，因此您希望将其作为 `

导入到 index.html 文件中

这是我在我的应用程序中导入 boostrap 的方法 - 下面进入 index.html 的 <head> 标记

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

这样我就可以在我的任何代码模板中使用 Bootstrap。

顺便说一句，该代码将链接到 4.3.1 版本——如果你想链接到不同的版本，你可以去 https://getbootstrap.com/ 并获得一个“新”链接——该网站非常有助于获取您将使用 CDN 链接。

但我看到您想将其导入您的 styles.css 文件中，因此您可能必须使用相对路径，可能类似于：

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

【讨论】：

或者可以从 angular,json 文件中导入样式数组，如下所示：node_modules/bootstrap/dist/css/bootstrap.min.css。在 Angular 中是常用的导入方式。

【解决方案2】：

如果您只想从引导程序添加样式，则 angular.json 文件中有一个属性允许您将其包含在构建中。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "projects": {
    "yourproject": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ]
          },
        ...

见：https://angular.io/guide/workspace-config#styles-and-scripts-configuration

【讨论】：

Angular.json中的Bootstrap是否也需要提到JS文件

【解决方案3】：

添加引导程序的一种简单方法是使用 Angular CLI(npm install)。

从命令行界面安装 bootstrap 并在 angular.json 中引用它

npm install bootstrap --save

【讨论】：

【解决方案4】：

在项目内src 文件夹下的style.css 文件中添加以下行。

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

【讨论】：