将 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 scss 的方式是否相同?
即
npm install bootstrap --save
并且,打开 angular.json 文件并将引导程序文件路径添加到样式部分.喜欢:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
以上方法是否对两个angular版本都一样.
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 应用中引用 Bootstrap (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
这篇关于将 Bootstrap 4 添加到 Angular 6 或 Angular 7 应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!