我们想在angular-cli 1.0.0-beta.5生成的应用程序中使用bootstrap 4 (4.0.0-alpha.2)(w/ node v6.1.0)。
在获得bootstrap及其对npm的依赖之后，我们的第一个方法是将它们添加到angular-cli-build.js中:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
然后导入到index。html中
<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
这在ng serve中工作得很好，但当我们生成一个带有-prod标志的构建时，dist/vendor中的所有依赖项都消失了(惊讶!)
我们打算如何处理这样的场景(即加载引导脚本)在一个用angular-cli生成的项目?
我们有以下想法，但我们真的不知道该怎么做……
use a CDN ? but we would rather serve these files to guarantee that they will be available
copy dependencies to dist/vendor after our ng build -prod ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?
adding jquery, bootstrap and tether in src/system-config.ts and somehow pull them into our bundle in main.ts ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).
首先，你必须用这些命令安装tether, jquery和bootstrap
npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4
在你的angular-cli中添加这些行。json(角。Json从版本6起)文件
"styles": [
"styles.scss",
"../node_modules/bootstrap/scss/bootstrap-flex.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]
好消息!基本上，Bootstrap 5现在可以很容易地实现，甚至不需要jQuery。
从您的终端运行
npm install bootstrap@next --save
因此，Angular在你的app.module中使用webpack。Ts，只要加上:
import "bootstrap";
或者如果你想分别导入它们，可以这样做:
import { ModuleToBeImported } from 'bootstrap';
然后是你的风格。scss,添加:
@import '~bootstrap/scss/bootstrap';
基本上就是这样，但是要注意一些组件需要popper.js。
需要bootstrap js的组件
在这里你也会看到依赖于popper.js的组件，在编写本文时，它们是用于显示和定位的下拉菜单，以及用于显示和定位的工具提示和弹出窗口。
因此，要安装popper.js，只需运行:
npm install @popperjs/core
参考
对于bootstrap 4.5, angular 10
npm install bootstrap --save
更新你的风格。这样的SCSS带有bootstrap import语句。
$theme-colors: (
"primary": #b867c6,
"secondary": #f3e5f5,
"success": #388e3c,
"info": #00acc1,
"light": #f3e5f5,
"dark": #863895
);
@import "~bootstrap";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
body {
color: gray('800');
background-color: theme-color('light');
font-family: 'Raleway', sans-serif;
}
导入引导应该在变量覆盖之后。[这个例子还展示了如何放置自己的主题颜色。]
