Как я устанавливаю Angular 5 с помощью ScSS и BootStrap

Вот моя среда, когда я настраиваю этот проект:

Angular CLI: 1.6.8
Node: 8.9.4
ОС: win32 x64
Angular: 5.2.8

Я создал проект Angular 5 с помощью этой команды. Я присвоил ему стиль.

ng new my-desired-project-name --style=scss

если посмотреть в .angular-cli.json, он показывает

“defaults”: {
  “styleExt”: “scss”,
  “component”: {}
}

Я создал папку scss внутри папки src, а затем переместил styles.scss в эту папку scss. В .angular-cli.json я отредактировал стили следующим образом:

“styles”: [
   “scss/styles.scss”
],

Затем я установил

npm install --save [email protected] 
npm install --save @ng-bootstrap/ng-bootstrap
npm install --save font-awesome

После установки импортируйте его в основной модуль. В этом случае мой app.module.ts содержит следующий код. То, что я добавил, выделеножирным шрифтом.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

а затем в .angular-cli.json я добавил это к стилям:

"styles": [
   "../node_modules/bootstrap/scss/bootstrap.scss",
   "../node_modules/font-awesome/scss/font-awesome.min.scss",
   "scss/styles.scss"
],

В файле styles.scss импортируйте

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

Затем я проверил, работает ли загрузчик, открыв app.component.html и добавив следующий код.

<div class="container">
    <div class="starter-template">
        <h1>This project is the sassy angular</h1>
        <p class="lead">Use this document as a way to quickly start any new project.
            <br> All you get is this text and a mostly barebones HTML document.</p>
    </div>
    <div class="container">
         Font awesome works
         <i class="fa fa-angellist" aria-hidden="true"></i>
    </div>
    <div class="container">
        <p>
           A progress bar:
           <ngb-progressbar showValue="true" type="info" [value]="80" [max]="100">
           </ngb-progressbar>
        </p>
    </div>
    <div class="container">
         <button type="button" class="btn btn-warning">Warning</button>
    </div>
</div>

когда я бегу

ng serve

вуаля!!! теперь мой знакомый стиль с бутстрапом показывает как положено :)