【Angular】CDNを使わずにBootstrapをインストールする

方針など

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から確認できる。

.angular-cli.jsonの編集

.angular-cli.jsonのscriptsに先程インストールした3つのjsを宣言する。

styles.scssの編集

「方針など」に記載したがBootstrapのスタイルは編集をようにするためにstyles.scssに記載する。なぜなら.angular-cli.jsonに記載した場合Bootstrapのscssの変数や関数に参照することができないから。

おわり

styles.scssにbootstrapのscssをimportするためbootstraのscssファイル内の変数・関数などを参照することができるため自分にあったデザインにカスタマイズすることがscss経由で可能となる。

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告