gulpもgruntも使わずにbootstrap4をカスタムビルド
bootstrapのカスタマイズのメリット
bootstrap4はsassで作られているので, 変数を設定することでフォントを変えたり, デフォルトの文字色を変えることが出来る.
他のcssを用意して上書きするのに比べて, この方法には以下のメリットがある.
- cssファイルが1つにまとまる
- ルールが1つになるため, どのルールが優先されるか気にする必要が無くなる
- デザインに統一感が生まれやすくなる
- bootstrapがsassで定義したマクロが使える
デメリットは
- public CDNを使うことができなくなるため, 他のサイトでbootstrapがキャッシュ済みであることを期待できなくなる
- めんどくさい
なお,
この方法を使うとbootstrapのコンパイル済みのCSSを配信するCDNは当然使えなくなるため,
npm install bootstrap@4.0.0-alpha.5
するなど,
パッケージマネージャでローカルにファイルを保存する必要がある.
_custom.scssを編集する方法(間違い)
Bootstrap 4 ships with a _custom.scss file for easy variable overrides.
bootstrapの公式ドキュメントにこう書かれているので, その通り_custom.scssを編集してビルドすることにした.
結論から言うと, この方法はつらく, 間違いである.
.gitignoreを編集
普通node_modulesディレクトリはgitの管理外にあるが, _custom.scssはプログラマが手でルールを書く必要があるため, このファイルだけはgitに補足させる.
/node_modules/*
!/node_modules/bootstrap/
/node_modules/bootstrap/*
!/node_modules/bootstrap/scss/
/node_modules/bootstrap/scss/*
!/node_modules/bootstrap/scss/_custom.scss
もうこの時点でつらくなってくる.
bootstrapのビルドコマンドを指定
bootstrap/package.json at v4-dev · twbs/bootstrapを見ればわかる通り, bootstrapをビルドするために必要なパッケージは数多い.
これを自分のアプリケーションのpackage.jsonに記述すると本来必要だったパッケージがわかりにくくなり, bootstrapの将来の更新で不整合が生まれるのも不安になってくる.
そこで,
自分のpackage.jsonではgruntコマンドの探索に必要なgrunt-cliだけをインストールし,
npm run
でnode_modules/bootstrapに移動してもらい,
そこでnpm install
を行ってもらうことにした.
package.jsonを抜粋する.
{
"dependencies": {
"bootstrap": "^4.0.0-alpha.5",
"grunt-cli": "^1.2.0"
},
"scripts": {
"build:bootstrap": "cd node_modules/bootstrap && npm i && grunt dist-css",
"watch:bootstrap": "cd node_modules/bootstrap && grunt watch"
}
}
これで無事bootstrapはビルドされる.
この方法の問題点
- _custom.scssが
npm install
する度に上書きされてリセットされる cd node_modules/bootstrap && npm i
で大量の重量級パッケージがダウンロードされ, インストールされる- gruntを利用したbootstrapのビルドはとても重く, ビルド待ちが長くなりつらくなる
@importする方法
問題点がかなり多かったため, _custom.scssを編集するのはやめることにした.
代わりに,
scssファイルからbootstrapを@import
する単純な方法を使うことにした.
現時点のこのサイトのdefault.scssを抜粋する.
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, Meiryo, Roboto, Arial, sans-serif;
@import 'node_modules/bootstrap/scss/bootstrap-flex';
blockquote {
@extend .blockquote;
}
scssを@import
する単純な方法で万事解決した.
また,
scssを@import
したあとにもスタイルを書けるため,
scssのbootstrapのルールを使って,
<blockquote>
にクラス指定がなくても
.blockquote
クラス指定をつけた時と同じスタイルに設定することなどが出来る.
このブログはpandocを使ってmarkdownからhtmlに記事を変換しているため, これができるとスタイル指定が楽である. 生htmlタグを書いて手動でクラスを設定する必要が無くなる.
このファイルのビルド手順を記述. package.jsonを抜粋する.
{
"dependencies": {
"bootstrap": "^4.0.0-alpha.5",
"highlight.js": "^9.7.0"
},
"scripts": {
"default.css": "cat default.scss node_modules/highlight.js/styles/solarized-dark.css|sass -I . --stdin --scss"
}
}
node-sassにはパイプでコマンドを実行すると65536 byteで出力が止まってしまう残念な仕様があったため, portageでインストールしたruby-sassを使っている.
ruby-sassのcssをimportして連結できない仕様は,
cat
コマンドを使って繋げてしまうという荒業で回避している.
dart-sassはこの記事を書いた時点ではまだまだアルファ版であり, bootstrapをビルドすることは出来なかった.
感想
- _custom.scss早く廃止して
- sassの
@include
や@extend
は便利 - gulp vs grunt vs catはcatの勝利
- dart-sassが実用化されてビルドが高速化することに期待したい