Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
74
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@pikanji

Bootstrap 4 をカスタマイズする

概要

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する。

以上

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
74
Help us understand the problem. What are the problem?