时间戳

首页 > 解决方案 > 将 Bootstrap 4 添加到 Angular 6 或 Angular 7 应用程序

angular - 将 Bootstrap 4 添加到 Angular 6 或 Angular 7 应用程序

问题描述

我正在使用 bootstrap 4 开发 Angular 应用程序。

我需要有关在我的角度应用程序中添加 scss 的帮助。

我的问题是：

IE

npm install bootstrap --save

并且，打开 angular.json 文件并将引导文件路径添加到样式部分。喜欢：

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

上述方式对于两个版本的角度是否相同。

标签： angularnpmbootstrap-4angular-cliangular7

解决方案

您需要执行以下操作：

将 Bootstrap 添加到package.json（使用 npm install bootstrap --save 完成）

将 Bootstrap 添加到angular.json（也需要 jQuery）

  "styles": [
     "styles.css".
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/popper.js/dist/umd/popper.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

在 Angular 应用程序中引用 Bootstrap (app.module.ts)

import bootstrap from "bootstrap";

演示：https
://codesandbox.io/s/kmm2q7zvko 文章：https ://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6

推荐阅读