Help us understand the problem. What is going on with this article?

Bootstrap 4 をカスタマイズする

More than 1 year has passed since last update.

概要

Bootstrap 4 のソースコードをいじらずに、変数を変更してカスタマイズする方法のメモ。

Bootstrap 4を使うならSassを使って3倍幸せになろう で説明されているように、スタイルの上書きでカスタマイズするのは保守性がよろしくないので、Bootstrap4の変数を変更することで気持ちよくカスタマイズする。

また、Bootstrapのソースコードを変更すると、Bootstrapパッケージをアップデートすると変更が消えてしまうので、変更内容は分離する。

とは言え、特に難しいことをするわけではなく、これこそが公式ドキュメントで説明されている方法でもある。

下ごしらえ

まず、自分のSCSSファイルを作成する。名前は何でもいいが、ここではcustom.scssとする。
中身は、Bootstarpのscssファイルへのパスを指定した@importだけ。

@import "path/to/bootstrap/scss/bootstrap";

npmで入れた場合は ../node_modules/bootstrap/scss/bootstrap などになる。

これだけで、コンパイルするとデフォルトのbootstrap.cssと同等のcustom.cssが作成されるので、bootstrap.cssをcustom.cssで置き換えることができる。

まずこれで、Bootstrap自体をコンパイルする必要がなくなり、bootstrap.cssをわざわざ自分のプロジェクトにコピーする必要もなくなる。

スタイルのカスタマイズ

custom.scss内で変更したい変数に値を設定する。
ここで注意すべきなのは、Bootstrapの@importよりも前に記述すること。

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "path/to/bootstrap/scss/bootstrap";

Bootstrapのデフォルトを上書きするものなので、変数への代入に!defaultはいらない。

変更できる変数はpath/to/bootstrap/scss/_variables.scss を参照のこと。

軽量化

せっかくBootstrapをカスタマイズするならば、スタイルの変更だけでなく、いらない機能を削除して軽量化もしたい。

上では@import "path/to/bootstrap/scss/bootstrap";でBootstrapのすべてのソースを読み込んでいたが、scss/bootstrap.scssの中身を見てみると、機能ごとのscssファイルをimportしているのがわかる。

custom.scssの@import "path/to/bootstrap/scss/bootstrap";をこれらのimport文にごっそり置き換えて、不要なファイルのimportを削除すればよい。

例:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// 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/code";
@import "../node_modules/bootstrap/scss/grid";
//@import "../node_modules/bootstrap/scss/tables";
//@import "../node_modules/bootstrap/scss/forms";
//@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/transitions";
@import "../node_modules/bootstrap/scss/dropdown";
//@import "../node_modules/bootstrap/scss/button-group";
//@import "../node_modules/bootstrap/scss/input-group";
@import "../node_modules/bootstrap/scss/custom-forms";
@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/navbar";
//@import "../node_modules/bootstrap/scss/card";
//@import "../node_modules/bootstrap/scss/breadcrumb";
//@import "../node_modules/bootstrap/scss/pagination";
//@import "../node_modules/bootstrap/scss/badge";
//@import "../node_modules/bootstrap/scss/jumbotron";
//@import "../node_modules/bootstrap/scss/alert";
//@import "../node_modules/bootstrap/scss/progress";
//@import "../node_modules/bootstrap/scss/media";
//@import "../node_modules/bootstrap/scss/list-group";
//@import "../node_modules/bootstrap/scss/close";
@import "../node_modules/bootstrap/scss/modal";
//@import "../node_modules/bootstrap/scss/tooltip";
//@import "../node_modules/bootstrap/scss/popover";
//@import "../node_modules/bootstrap/scss/carousel";
@import "../node_modules/bootstrap/scss/utilities";
//@import "../node_modules/bootstrap/scss/print";

functions variables mixins は必須。 rootrebootもほとんどの場合必要だろう。その他は必要に応じてimportする。

以上

pikanji
主な職歴:産業系組込みソフト → Androidアプリ → Webサイト・アプリ(PHPからFE全般) → Webサービス(Java BE)→ Webサービス(インフラ、BE、FE)& Flutterアプリ & 会社経営 ←イマココ。とりあえず何でもやる。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした