rails bootstrap-sass assets compilation error - undefined variable alert-padding

Question

all roads point to bootstrap-sass

Referral chain:

• railscast-328 (twitter bootstrap basics) refers to
• http://www.sitepoint.com/twitter-boots

Answer 1

Don't know why but for me it helped to put into assets.rb this line

Rails.application.config.assets.precompile += [/^[-_a-zA-Z0-9]*\..*/]

Initially I had the Sass::SyntaxError: Undefined variable: "$alert-padding". problem with this line

Rails.application.config.assets.precompile += [/.*\.css/] 

But after I changed it to the first one the problem was solved and everything worked in production.

Answer 2

My specific problem turned out to be some code hiding in application.rb...

how I found it

I added puts config.assets.precompile.inspect to config/environments/production.rb and marvelled at the regex it output. Then I searched the codebase for "config.assets.precompile" and lo, in application.rb, there was:

config.assets.precompile << /(^[^_\/]|\/[^_])[^\/]*$/
...
config.assets.precompile += ["*.js", "*.css", "jquery-migrate-rails.js"]

which was causing the problem. (I'm slightly puzzled as I've triple checked those regexes and they shouldn't be picking up _alerts.scss... but lets gloss over that and focus on the fact that removing those lines fixed it)

Maybe this will help someone else...

Answer 3

I was facing same issue with Rails 4. I figured out solution to overwrite the gems. For it I copy the bootstrap gem bootstrap-sass-X.X.X.X in vendors folder Than Change in Gemfile for gem path

  gem 'bootstrap-sass', '3.3.1.0', :path => 'vendor/bootstrap-sass-X.X.X.X'
  than write these 2 line
    @import "bootstrap/variables";
    @import "bootstrap/mixins";
  at top of each of file which are inside the bootstrap folder
  (vendor/bootstrap-sass-X.X.X.X/assets/stylesheets/bootstrap)

  //like for _alerts.scss

  // Alerts
  // --------------------------------------------------
    @import "bootstrap/variables";
    @import "bootstrap/mixins";

  // Base styles
  // -------------------------

Answer 4

There is an issue with globing and precompiling assets. https://github.com/twbs/bootstrap-sass/issues/863

If you must precompile your js and css assets:

Rails.application.config.assets.precompile += [proc { |filename, path| path =~ /(app|lib|vendor)\/assets/ && ['.js', '.css'].include?(File.extname(filename)) }]

Basically this proc will look in app lib and vendor folders for your assets.

Also, used a section of the Rails Guide to come up with this code