Вот моя среда, когда я настраиваю этот проект:
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
вуаля!!! теперь мой знакомый стиль с бутстрапом показывает как положено :)