Bootstrap4をカスタマイズしてソースからビルド #Node.js

意外と簡単にできるので紹介

ソースの入手

以下のサイトからSource filesの見出しにある[Download source]からダウンロード
https://getbootstrap.com/docs/4.1/getting-started/download/

Node.js

以下のサイト、もしくはyumなどで予めNode.jsをインストールしておいてください。
https://nodejs.org/ja/

ソースの確認

ダウンロードしたソースのアーカイブを解凍して中身を確認してみてください。

カスタマイズ例

今回カスタマイズしてみるのは
[Bootstrapのトップ(解凍した)ディレクトリ]/scss/にあるファイルの_variables.scssを書き換えて配色パターンに
ピンク系のthirdaryというパターンを足してみます。
74行目辺りにあるsecondaryの下にthirdaryを足します。

_variables.scss

$secondary:     $gray-600 !default;
$thirdary:      $pink !default;

87行目辺り(上記改変前は86行目)にあるsecondaryの下にthirdaryを足します。

_variables.scss

    "secondary":  $secondary,
    "thirdary":   $thirdary,

ビルド

解凍したディレクトリのトップで以下のコマンドを実行してビルドに必要なパッケージ群をインストールします。

$ npm install

また以下のコマンドにてビルドを実行します。

$ npm run dist

ビルドしたBootstrapの確認

ビルド後に[Bootstrapのトップディレクトリ]/dist/にあるcss,jsディレクトリを適当にコピーし
以下のようなhtmlを書いてみてピンク色のボタンが表示されれば成功です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Custom Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<input type="button" value="Thirdary Button" class="btn btn-thirdary"/>
</div>
</body>
</html>

ちなみに原因はわかっていないのですが
解凍直後のディレクトリにあるdistとビルドした後にできるdistの内容を比較したところ
以下の定義だけ生成されていないことを確認しています。

bootstrap.css

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}