移动全局样式

src/styles.scss   移动到  src/assets/scss/styles.scss

需要修改配置angular.json

"styles": [
  "src/styles.scss"
]

改为  

src/assets/scss/styles.scss

安装bootstrap

npm install bootstrap --save

引入bootstrap 4.x      styles.scss 中根据安装目录添加下面代码:

@import '~node_modules/bootstrap/scss/bootstrap';

安装字体

npm install ionicons --save

添加文件 src/assets/scss/ionicons.scss，styles.scss 中根据安装目录添加下面代码:

$ionicons-font-path: "../../../node_modules/ionicons/dist/fonts";
@import "~ionicons/dist/scss/ionicons"; 

HTML中可以引用字体类了

<i class="ion-ios-add-circle"></i>

文件目录结构如下：

├── README.md
├── angular.json
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   └── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── core
│   │   │   ├── core.module.ts
│   │   │   ├── footer
│   │   │   ├── header
│   │   │   ├── index.ts
│   │   │   ├── layout
│   │   │   ├── service
│   │   │   └── spinner
│   │   └── modules
│   │       ├── home
│   │       └── login
│   ├── assets
│   │   └── scss
│   │       ├── _variables.scss
│   │       ├── ionicons.scss
│   │       ├── partials
│   │       └── styles.scss
│   ├── browserslist
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── karma.conf.js
│   ├── main.ts
│   ├── polyfills.ts
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json
└── tslint.json

查看代码[https://github.com/eclimoom/angular-learn02.git]