Twitter bootstrap has Invalid CSS according to Rails 3.1 asset pipeline during precompilation?

Question

I created a brand new Rails 3.1 app. I added the twitter bootstrap CSS file in app/assets/stylesheets/bootstrap.min.css. Here is the relevant code

app/assets/stylesheets/application.css (includes the tree, so bootstrap is included)

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/

Gemfile (includes execjs and therubyracer for compile/compress)

group :development, :qa do
  gem 'execjs'
  gem 'therubyracer'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.1.0'
  gem 'coffee-rails', '~> 3.1.0'
  gem 'uglifier', '>= 1.0.3'
end

Then I run the rake task to precompile assets

rake assets:precompile

this fails with the following error

Invalid CSS after ".inputs-list li+": expected number or function, was "li"

that CSS is in the bootstrap file (".inputs-list li+li" is the selector).

However, if I run

rake assets:precompile RAILS_ENV=development

now it works fine. Turns out that if I change config/environments/production.rb to not compress files:

config.assets.compress = false

then the original command works too (without specifying development environment).

So, how do I track down the error? I can live with just turning off compression for now, but obviously something is wrong. Is it Rails? Sprockets? The Ruby Racer? Uglifier?

Answer 1

I recommend using one of the libraries that converts bootstrap to sass and incorporates it into the asset pipeline. This way you'll get the JS incorporated, you can change the variables that bootstrap uses in a preboot.scss file, and you can pick and choose which features to incorporate. You'll also be able to upgrade using bundler.

I use bootstrap-sass and it works great: https://github.com/thomas-mcdonald/bootstrap-sass

Answer 2

I fixed this using the non-minified version of Bootstrap. It'll still get compiled when running rake assets:precompile so it's not an issue :)