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 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 🙂