RailsでTwitterBootstrapを手動で入れる時(LESS編)

Bootstrapを入れるGemって種類が沢山あってね。

seyhunak/twitter-bootstrap-rails

metaskills/less-rails-bootstrap

jlong/sass-bootstrap

どれを使っていいのか分からん!って時は手動で入れてしまえばいいかと。
バージョンアップにも気軽に対応できるし。

で、Railsアプリのディレクトリのどこに置こうか、、、ってなるんだけど、
おすすめはこんな感じ。

rails bootstrap

それぞれ、
application.jsには
//= require js/bootstrap
application.cssには
*= require less/bootstrap
を追加する。

で、vender/assetsの直下にbootstrapフォルダを作って配置しているので、
下記をconfig/application.rbに追加してあげればいいかと。

bootstrapフォルダをassets pipelineの参照先に追加する

config.assets.paths << Rails.root.join("bootstrap")

rails g controller で作成されるファイルを.scssではなく.lessにする

config.app_generators.stylesheet_engine :less


で、Bootstrapの要素を利用するには、
app/assets/stylesheets/custom.css.less とかを作ってその中に、

/* Bootstrap core variables and mixins */
@import "../../../vendor/assets/bootstrap/less/variables.less";
@import "../../../vendor/assets/bootstrap/less/mixins.less";

とかすればいいんじゃないかな。


もちろんデフォルトSassじゃなくてLessを使いたいので、
コンパイラをLessにしちゃいます。
<a href="https://github.com/metaskills/less-rails/" target="_blank" title="metaskills/less-rails">metaskills/less-rails</a>

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた