angular4+引入bootstrap(引入sass)

方式1. BootstrapCDN

将预编译的 CSS 或 JS 文件引入index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bstrap</title>
  <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里引入

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ngxbstrap</title>
  <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>

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:
1. 在testsass.component.html中使用.jj的样式却没有问题
2. 在组件内定义的变量可以识别

testsass.component.html

<h1 class="jj">h1标题</h1>
<h1 class="article">article</h1>

解决：
还要在当前组件内引入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