今回はsassを用いてBootstrapをカスタマイズする方法を整理しました。
前提
エディター：VSCode
npm 6.13.4
Bootstrap4を使用。
sassでカスタマイズするメリット
「Bootstrapの内容を変更したい、、、」まず思い着いたのは、自分で作成したCSSファイル上で値を上書きすることでした。
しかし実際にその方法で変更していると、CSSファイルの中身が大きくなり、複雑になってしまう。それに伴い、再度変更したくなった際に見つけるのが大変で困る困る。
そこでたどり着いたのがsassを用いたカスタマイズでした。Bootstrap4以降では、CSSの記述はsassのみが採用されているとのことです。（sassについては、こちらの記事をご覧ください。）
sassを使うことで、変数の値を変えるだけでBootstrapの内容を変えることができるため、とても分かりやすい＆管理がしやすくなります。
sassのダウンロード・ファイル構造
方法はいくつかあります。詳しくは公式サイトをご覧ください。
今回はnpmを用いてパッケージをダウンロードしました。
$ npm install bootstrap
例として、your-projectというプロジェクトがあり、scssフォルダにcustom.scssという独自のscssファイルを作成している状態だとします。npmを用いてダウンロードすると、以下の様にnode_modulesというフォルダが追加され、その中にjsやscssのフォルダが存在しています。
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
カスタマイズの方法
node_modules内のBootstrapのコアファイルを修正することもできます。しかし、元に戻したくなった場合や、エラーが生じてしまった際に場所を見つけるのが困難になってしまう等の点から推奨されていません。
そこで、独自に作成したcustom.scssにBootstrapのsassファイルをインポートし、そこで値を変更していきます。その際、Bootstrapのファイルを全てインポートする、または必要な内容だけをインポートするという方法があります。
方法は次の「軽量化」で記述します。公式で推奨されているのは後者なのですが、それぞれのファイルの内容が複雑に関わり合っているので、慣れるまでは前者の方法を使用することになるかと思います。
@import"../node_modules/bootstrap/scss/bootstrap";あとはインポートの記述の前に変更したい値を定義するだけです。Bootstrapの全ての変数はscss/_variables.scssファイルに記述されています。
公式同様、body要素の background-color と color を変更する例を次に示します。
$body-bg:#000;$body-color:#111;@import"../node_modules/bootstrap/scss/bootstrap";あとはコンパイルすることで内容を変更することができます。
※CDNを用いている場合は変更内容が適応されないので、htmlのhead要素内に自分で作成したcssファイルを読み込む記述を忘れずに。
軽量化
全てのファイルをインポートすると要領が大きくなってしまいます。そこで、軽量化を図るための方法を最後に載せておきます。
// Required@import"../node_modules/bootstrap/scss/functions";@import"../node_modules/bootstrap/scss/variables";@import"../node_modules/bootstrap/scss/mixins";// Optional@import"../node_modules/bootstrap/scss/root";@import"../node_modules/bootstrap/scss/reboot";@import"../node_modules/bootstrap/scss/type";@import"../node_modules/bootstrap/scss/images";@import"../node_modules/bootstrap/scss/containers";@import"../node_modules/bootstrap/scss/grid";Reqiredの３つのファイルは必須です。Optionalのファイルは各自の変更したい内容に応じてインポートしてください。
