09 12 / 2011

Revisited: Rails 3.1.x with compass, sass and twitter-bootstrap using the asset pipeline

This is a revised post for the previously released post Rails3.1 with compass, sass and twitter-bootstrap using the asset pipeline It had problems while compiling the assets via rake assets:compile

Here I’ll show you 2 alternative ways to get Compass, SASS(.sass) and Twitter bootstrap installed and compiled in a Rails 3.1.3(latest on as of writing this).

1. Using anjlab-bootstrap-rails

Add the necessary gems in the Gemfile.

group :assets do
  ...
  gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :tag => 'v0.12.alpha.2'
  gem 'sass-rails', "  ~> 3.1.0"
  gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails',
                                  :git => 'git://github.com/anjlab/bootstrap-rails.git', 
                                  :ref => 'eab5c9e3db95'
end

Rename the app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss and replace the commented manifest with below.

@import "bootstrap";
@import "compass/css3";
@import "base";

The above imports all the stylesheets of Bootstrap, Compass’s CSS3 mixins and our own base.sass files.

The following is the sample base.sass file using compass/css3 mixins.

a
  outline: 0
object, embed
  outline: 0
input::-moz-focus-inner
  border: 0

div#main
  +box-shadow(red 2px 2px 10px)

We can use all the compass cross-browser compatible awesome mixins.

2. Using compass_twitter_bootstrap

Add the necessary gems in the Gemfile.

group :assets do
  ...
  gem 'compass', :git => 'https://github.com/chriseppstein/compass.git', :tag => 'v0.12.alpha.2'
  gem 'sass-rails', "  ~> 3.1.0"
  gem 'compass-twitter-bootstrap', :git => 'git://github.com/vwall/compass-twitter-bootstrap.git', 
                                :ref => 'b6f9b467bc'

end

Add a file at config/initializers/sass.rb with the following:

Rails.configuration.sass.tap do |config|
  # twitter bootstrap
  config.load_paths << Compass::Frameworks['compass'].stylesheets_directory
  config.load_paths << Compass::Frameworks['twitter_bootstrap'].stylesheets_directory
end

Rename the app/assets/stylesheets/application.css file to app/assets/stylesheets/application.css.scss and replace the commented manifest with below.

@import "compass_twitter_bootstrap"
@import "compass/css3";
@import "base";

Verifying the assets:compile task

Well, if the bootstrap with compass works in development mode doesn’t mean that it will compile the assets properly. To verify it, the rake assets:compile task should run successfully both in development and production environment.

So, to verify this, just run

RAILS_ENV=development bundle exec rake assets:compile
RAILS_ENV=production bundle exec rake assets:compile

This should create compressed assets at public/assets directory.

Hope you find it useful.