更新日: 2013年12月16日
Rails

Rails4 に bootstrap-sass で Twitter Bootstrap3 を導入

CSS を Sass 形式で書くために、Rails4 アプリケーションに bootstrap-sass の gem を用いて、Twitter Bootstrap3 を導入します。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Gemfile に bootstrap-sass を追加

Gemfile に bootstrap-sass を追加して、bundle install。


$ vim Gemfile
source 'https://rubygems.org'

gem 'bootstrap-sass', '3.0.2.0'

$ bundle install

$ vim Gemfile

source 'https://rubygems.org'

gem 'bootstrap-sass', '3.0.2.0'

$ bundle install

Bootstrap3 を使います。ここでサーバーが起動していたら再起動。


$ bundle exec rails s

$ bundle exec rails s

config/application.rb に設定を追加

config/application.rb に config.assets.precompile〜の行を追加し、bootstrap-sass が Asset Pipeline と互換性を持つようにします。

config/application.rb

require File.expand_path('../boot', __FILE__)
#・・・

module Railsapp
  class Application < Rails::Application
    # ・・・

    # for bootsrap-sass
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
  end
end

require File.expand_path('../boot', __FILE__)

#・・・

module Railsapp

class Application < Rails::Application

# ・・・

# for bootsrap-sass

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

end

カスタマイズ用の custom.css.scss ファイルを作成

css カスタマイズ用の custom.css.scss ファイルを作成して、bootstrap を import します。


$ vim app/assets/stylesheets/custom.css.scss
@import "bootstrap";

$ vim app/assets/stylesheets/custom.css.scss

@import "bootstrap";

このファイルに Sass 形式で、カスタマイズ用の CSS を追記していきます。以上で bootstrap-sass の導入は終了。Sass の文法などは以下を参照。

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング