将Bootstrap 4添加到Angular 6或Angular 7应用程序 [英] Add Bootstrap 4 to Angular 6 or Angular 7 application

问题描述

我正在使用Bootstrap 4处理Angular应用程序.

I am working on Angular application using bootstrap 4.

我需要与我在angular应用程序中添加scss相关的帮助.

I need help related to scss adding in my angular application.

我的问题是:

• 在Angular 6和Angular 7中添加bootstrap 4 scs的方法是否相同?

即

npm install bootstrap --save  

然后，打开angular.json文件，并将引导文件路径添加到样式部分.喜欢:

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

以上两种方式的角度是否相同?

Is the above way is same for both the version of angular.

推荐答案

您需要执行以下操作:

将Bootstrap添加到package.json (通过npm install bootstrap --save完成)

Add Bootstrap to package.json (which is done with npm install bootstrap --save)

将Bootstrap添加到angular.json (也需要jQuery)

Add Bootstrap to angular.json (jQuery is required too)

  "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应用程序中的参考引导程序(app.module.ts)

Reference Bootstrap in the Angular app (app.module.ts)

import bootstrap from "bootstrap";

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

Demo: https://codesandbox.io/s/kmm2q7zvko
Article: https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6

这篇关于将Bootstrap 4添加到Angular 6或Angular 7应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！