IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

Bootstrap4 をカスタマイズしてみる

はじめに

ここでは、以下の記事を参考にして Bootstrap4 をカスタマイズしてみることにする。

 

作ってみる

ざっくりとプロジェクトを作成する。

  • mkdir bs4_custom
  • cd bs4_custom
  • touch index.html

 

Bootstrap4 をダウンロードする。ここでは、コンパイルされる前のファイルをダウンロードする。ダウンロードして解凍したら、scss ディレクトリだけカレントディレクトリにコピーしておく。

 

scss/bootstrap.scss ファイルの中身は以下のようになっている。

f:id:matt-note:20190312155319p:plain

 

カスタマイズ用のファイルを作成して、scss/bootstrap.scss をインポートする。

  • touch custom.scss
  • echo '@import "scss/bootstrap";' >> custom.scss

 

変数の値をカスタマイズしてみる。カスタマイズする値は、@import よりも前に記述する必要がある。@import の後ろに記述してコンパイルすると、うまくいかなかった。

f:id:matt-note:20190312163018p:plain

 

コンパイルする。ここでは node-sass を使ってみる。インストールは npm install -g node-sass を実行する。ファイルの指定方法は、cp コマンドや mv コマンドと同じ要領で指定する。【参考:node-sassでSassファイルをコンパイルする - Qiita

f:id:matt-note:20190312162320p:plain

 

HTML ファイルを編集する。HTML ファイルからコンパイルした custom.css を参照する。

f:id:matt-note:20190312161255p:plain

f:id:matt-note:20190312161441p:plain

-> Bootstrap4 をカスタマイズすることができた。

デフォルトの変数については、_variables.scss ファイルにまとまっている。ここでは、$input-box-shadow の値を変更してみることにする。

f:id:matt-note:20190315173820p:plain

custom.scss ファイルを編集してコンパイルする。

f:id:matt-note:20190315173942p:plain

f:id:matt-note:20190315174131p:plain

-> デフォルトで input 要素につけられる box-shadow を無効にすることができた。