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

https://stackoverflow.com/questions/21911620

14-10-2022
|

Question

all roads point to bootstrap-sass

Referral chain:

railscast-328 (twitter bootstrap basics) refers to
http://www.sitepoint.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/ which refers to
https://github.com/jlong/sass-bootstrap which in turn exclaims there is a new official port of bootstrap to sass at
https://github.com/twbs/bootstrap-sass which is another one of the options in the twitter-bootstrap article

It is reported as an issue with the bootstrap-rails gem: https://github.com/anjlab/bootstrap-rails/issues/91

I believe I installed it correctly

The gems

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

are installed (tried outside and inside of assets group), application.css.scss contains

@import "bootstrap";

only.

but it gives me an error

When attempting bundle exec rake assets:precompile it gives this error:

rake aborted!
Undefined variable: "$alert-padding".
  (in /home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets/bootstrap/_alerts.scss)
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets/bootstrap/_alerts.scss:10
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/variable.rb:49:in `_perform'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/node.rb:40:in `perform'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:320:in `visit_rule'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `block in visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:128:in `visit_root'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:7:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/root_node.rb:20:in `render'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:315:in `_render'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/engine.rb:262:in `render'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-rails-3.2.6/lib/sass/rails/template_handlers.rb:106:in `evaluate'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/tilt-1.3.7/lib/tilt/template.rb:77:in `render'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:193:in `block in evaluate'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `each'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/context.rb:190:in `evaluate'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/processed_asset.rb:16:in `initialize'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `new'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/base.rb:18:in `block in build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:270:in `circular_call_protection'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/base.rb:14:in `build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/bundled_asset.rb:12:in `initialize'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `new'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/base.rb:22:in `build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:93:in `block in build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/caching.rb:19:in `cache_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/index.rb:92:in `build_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:169:in `find_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/index.rb:14:in `find_asset'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:41:in `block in compile'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:219:in `block in each_logical_path'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:206:in `block (2 levels) in each_file'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:196:in `each_entry'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:204:in `block in each_file'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:203:in `each_file'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sprockets-2.2.2/lib/sprockets/base.rb:217:in `each_logical_path'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/sprockets_overrides/static_compiler.rb:29:in `compile'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/tasks/assets.rake:108:in `internal_precompile'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/turbo-sprockets-rails3-0.3.11/lib/turbo-sprockets/tasks/assets.rake:115:in `block (3 levels) in <top (required)>'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:246:in `call'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:246:in `block in execute'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:241:in `each'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:241:in `execute'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:184:in `block in invoke_with_call_chain'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/1.9.1/monitor.rb:211:in `mon_synchronize'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:177:in `invoke_with_call_chain'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/task.rb:170:in `invoke'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:143:in `invoke_task'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:101:in `block (2 levels) in top_level'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:101:in `each'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:101:in `block in top_level'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:110:in `run_with_threads'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:95:in `top_level'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:73:in `block in run'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:160:in `standard_exception_handling'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/lib/rake/application.rb:70:in `run'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/rake-10.0.4/bin/rake:33:in `<top (required)>'
/home/joe/.rbenv/versions/1.9.3-p448/bin/rake:23:in `load'
/home/joe/.rbenv/versions/1.9.3-p448/bin/rake:23:in `<main>'

I checked that /home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets/bootstrap.scss does actually import the _variables.scss file below it in the bootsrap/ directory first (prior to _alerts.scss etc), and it does... and in _variables.scss it defines $alert_padding.

I suspect I'm missing something obvious

In the environments/production.rb file I commented everything about assets out, and tried just config.assets.initialize_on_precompile = true in accordance with the manual https://github.com/twbs/bootstrap-sass

research so far

bootstrap-sass: Undefined variable: "$baseLineHeight"
Proper SCSS Asset Structure in Rails
Using twitter bootstrap with rails assets pipeline and less
https://github.com/twbs/bootstrap-sass/issues/79#issuecomment-4428595
trying to import bootstrap via bootstrap-sass on heroku but getting an error
https://github.com/twbs/bootstrap-sass
https://github.com/anjlab/bootstrap-rails/issues/91
railscast 328, 329 and 268 looking for clues
googling about
modifying gem's bootstrap/bootstrap.scss to use underscore and .scss, various tinkering such as commenting out lines relating to assets in environments/production.rb, commenting in only the one in the gem's page (manual) config.assets.initialize_on_precompile = true

issue identified

I copied the gem's contents into my assets directory, which is essentially what jlong's bootstrap did.

its not looking at application.css.scss... its ignoring what I put in there and electing to instead look into the folders and loading those files. Which is why it sees alerts.scss first. I tried changing the name of _variables.scss to _aavariables.scss to no avail

Solution

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

OTHER TIPS

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.

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

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

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow