SassベースのAngular4アプリケーションでブートストラップのマテリアルデザインを統合する方法

Question

私は、Sassベースのangular4アプリケーションにbootstrap-material-designを統合しようとしています。

プリコンパイルされたCSSでは問題なく動作します。しかし、私はブートストラップ材料設計のサスのバージョンを使用したいと思います。

私を助けてください。

ng new your-angular-project --style=scss 

ステップ2：角度CLIコマンドを使用して、新しい角度プロジェクトを作成します。

Answer 1

これは、ステップ方式によってステップはステップ1

サスを使用してブートストラップ4とマテリアルデザインを使用することです：

cd your-angular-project 

ステップ3：GitHub npm install

npm i angular-bootstrap-md --save 

ステップ4：変更しない場合は、styleExtがアンギュラcli.jsonファイルに "SCSS" に設定されていることを確認してください：

app.module.tsには

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; 
import { MDBBootstrapModule } from 'angular-bootstrap-md'; 

@NgModule({ 
    imports: [ 
     MDBBootstrapModule.forRoot() 
    ], 
    schemas: [ NO_ERRORS_SCHEMA ] 
}); 

ステップ5を追加します

"styleExt": "css" to "styleExt": "scss" 

ステップ6：

あなたが持っていることを確認してください。代わりにsrc/styles.cssがある場合は、名前を.scssに変更してください。

既存のプロジェクトでのスタイルを変更したい場合はNG defaults.styleExt設定SCSS

ステップ7使用することができます：アンギュラcli.jsonにラインの下に追加します。

"styles": [ 
    "../node_modules/font-awesome/scss/font-awesome.scss", 
    "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss", 
    "../node_modules/angular-bootstrap-md/scss/mdb-free.scss", 
    "./styles.scss" 
], 
"scripts": [ 
    "../node_modules/chart.js/dist/Chart.js", 
    "../node_modules/hammerjs/hammer.min.js" 
], 

ステップ8：アップデートts.config.jsonファイルは、ルートフォルダにtsconfig.jsonファイルに以下を追加し

"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"], 

ステップ9：インストール外部LIBS

npm install -–save chart.js@2.5.0 font-awesome hammerjs 

ステップ10：ファイル名を指定して実行サーバーマニュアルとNPM構成のための

ng serve --open 

、https://mdbootstrap.com/angular/5min-quickstart/ドキュメント、https://mdbootstrap.com/ため

、このページを開いた後、あなたがそのように見つける下がると参照してくださいするにはここをクリック文書