angular4+引入bootstrap(引入sass)
方式1. BootstrapCDN
将预编译的 CSS 或 JS 文件引入index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bstraptitle>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">script>
head>
<body>
<app-root>app-root>
body>
html>
方式2.npm安装ngx-bootstrap
方式3.npm安装bootstrap
之前看这里和这里,以为任意安装ngx-bootstrap或者bootstrap的任意一个就好了，一直没成功，都得用到cdn文件，npm安装的根本没起到作用？？？然后看到这里安装成功了
方式2. npm安装bootstrap+ngx-bootstrap（其中css用的是scss）
1. 进入项目目录
npm install ngx-bootstrap bootstrap --save
2. app.module.ts配置
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
@NgModule({
imports: [
TooltipModule.forRoot(),
BsDropdownModule.forRoot(),
],
})
3. sass配置
- src/styles.css的
.css后缀改为.scss - 更改.angular-cli.json里的
.css后缀
"styles": [
"styles.scss"
],
.
.
"defaults": {
"styleExt": "scss"
}
ps:新建公共scss文件:
- 比如创建文件
src/_variables.scss（官方文档是这样命名的，但是试过去掉下划线也可以） - 在styles.scss中写入
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
4. js文件还不知道怎么配置，暂时还是在index.html里引入
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ngxbstraptitle>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">script>
head>
<body>
<app-root>app-root>
body>
html>
5. ok!
轮播图（依赖js）和button样式都正常显示
6. 在引入了onsenui的项目里这样引入bootstrap也没有影响
styles.scss:
/* You can add global styles to this file, and also import other style files */
//onsenui
@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';
//bootstrap
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
7. 在angular中使用sass
将.css后缀改为.scss就可以了
有个问题（已解决）
angular组件的sass文件内不能识别style.scss内的变量
styles.scss中引入了variables.scss,variables.scss内定义了变量$jj，在testsass.component.scss中使用$jj会报错
variables.scss
$jj : #05c2fc;
.jj {
background: $jj;
}
styles.scss
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
testsass.component.scss
$background: #fa6164;
.article {
// background: $jj;//报错
background: $background//正常
}
ps:
- 在
testsass.component.html中使用.jj的样式却没有问题 - 在组件内定义的变量可以识别
testsass.component.html
<h1 class="jj">h1标题h1>
<h1 class="article">articleh1>
解决：
还要在当前组件内引入variables.scss
这样的话，每个需要用到
variables的组件都得引入一次，在styles.scss内引入@import 'variables';不是全局都可以使用的意思吗？
其它
- angular可以直接使用
sass，和上面的一样直接改配置就好了，或者在新建项目时指定用的是sass - 其它项目使用bootstrap可以
npm安装后引入bootstrap的sass文件。
源码：https://github.com/kikyo20/MyNgProject
参考：
https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap.md
https://github.com/valor-software/ngx-bootstrap