LoginSignup
11

More than 5 years have passed since last update.

[Rails][Middleman] Bootstrapを実践で使うならカスタムビルドしてみよう

Last updated at Posted at 2014-07-04

前提

アセットパイプラインを使った手順で説明します(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';

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11