方針など
AngularにBootstrapをインストールする。angular-cliを利用した環境でcssではなくscssを利用する。Bootstrapのcssは直接使用せずにscssをimportしBootstrapのスタイルのカスタマイズを行えるようにする。
環境
- “@angular/cli”: “1.5.0”,
- “@angular/common”: “5.0.1”
Bootstrapのインストール
注意しないといけないところはbootstrap、jquery、popper.jsのバージョンを指定しておくこと、バージョンが違うとBootstrapが正常に機能しない。最新バージョンの確認はBoostrap公式のJS, Popper.js, and jQueryから確認できる。
|
1 |
npm install --save bootstrap@4.0.0-beta.2 jquery@3.2.1 popper.js@1.12.3 |
.angular-cli.jsonの編集
.angular-cli.jsonのscriptsに先程インストールした3つのjsを宣言する。
|
1 2 3 4 5 |
"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/popper.js/dist/umd/popper.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], |
styles.scssの編集
「方針など」に記載したがBootstrapのスタイルは編集をようにするためにstyles.scssに記載する。なぜなら.angular-cli.jsonに記載した場合Bootstrapのscssの変数や関数に参照することができないから。
|
1 2 3 |
@charset "UTF-8"; @import "node_modules/bootstrap/scss/bootstrap"; |
おわり
styles.scssにbootstrapのscssをimportするためbootstraのscssファイル内の変数・関数などを参照することができるため自分にあったデザインにカスタマイズすることがscss経由で可能となる。