前提
アセットパイプラインを使った手順で説明します(Webpack等を使っていても同じ考え方でできます)。つまり対象は下記になります。
- Rails
- Middleman 3
-
middleman-sprockets
gemを導入した Middleman 4
やりたいこと
- Rails や Middleman に Bootstrap を組み込む
- Bootstrap 全部の機能は不要なので、使わないコンポーネントは削りたい
- Bootstrap は日本語のことをあまり考慮してなかったり、好みの色にしたいなど、変数に手を入れたい
- 自分で追加するスタイルシートにも共通の変数が使いたい
手順
Gemfile に下記追加して bundle install
します(Bootstrap 3の場合は bootstrap-sass
を使うことになろうかと思います)。
Gemfile
gem 'bootstrap', require: false
この gem を使うと、
@import "bootstrap";
を書けとあります。そもそもこれ何やってるかって話なんですが、 Bootstrap 内部の _bootstrap.scss を呼んでるんですね。じゃあこれ、自分のいるやつだけ @import
するようにしてやればいいということになります。
このファイルをコピーして、たとえば _boostrap-custom.scss
という名前で保存すると、このように呼び出せます。
@import 'bootstrap-custom';
変数の Override がしたい場合は、この前に書くといいでしょう。
$font-family-sans-serif: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
// :
// :
@import 'bootstrap-custom';