Rails Asset Pipeline and Twitter Bootstrap Gem

Question

I am using the latest master branch of the bootstrap-rails gem and trying to modify the default bootstrap variables in a way that's compatible with rails asset pipeline.

My gem file has these gems included

gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'less-rails-bootstrap'

I also included *= require bootstrap_and_overrides in my application.css file. I am aware that sprockets compiles each css file individually and therefore you cannot expect multiple css files to be able to reference each other. Therefore the bootstrap_and_overrides.css.less file includes the following:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 80px; }

//background-image: asset-url("background.png"); background-repeat:no-repeat; background-size: cover;  }

@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');
@iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png');

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-path('fontawesome-webfont.eot');
@fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff');
@fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf');
@fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz');
@fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg');

// Font Awesome
@import "fontawesome";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// @linkColor: #ff0000;

@navbarHeight: 60px;
@navbarText: @white;
@textColor: @orange;
@navbarLinkColor: @white;
@navbarBackground: darken(@linkColor, 15%);
@navbarBackgroundHighlight: @linkColor;

However none of my overrides work under the asset pipeline. They work fine without it. Anyone know why?

Update My Assets Gem Group

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'
  gem 'less-rails'
  #  gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platform => :ruby
  gem 'uglifier', '>= 1.0.3'
end

Answer 1

Running rake assets:precompile locally prior to deployment solved my problem above.

Answer 2

In my case, the directory which asset pipeline engines look for resources have not correctly set-up, cause assets not properly compiled.

I'm using bootstrap-sass, so your situation might be different. But in my case, adding following code to application.rb solved my problem.

module ApplicationModuleName
  class Application < Rails::Application

    config.sass.load_paths = []
    config.sass.load_paths << "#{Rails.root}/app/assets/stylesheets"
    %w(bootstrap-sass jstree-rails jquery-rails).each do |pkg|
      config.sass.load_paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/stylesheets"
      config.assets.paths << "#{Gem.loaded_specs[pkg].full_gem_path}/vendor/assets/javascripts"
    end
  end
end

Try run rails console and check the value of load_paths or something like that before applying above (ugly) patches..