title: Undefined variable: "$alert-padding" using Rails, AngularJS and Bootstrap
body: <p>I am experiencing an issue while precompiling the assets of my Rails projects.</p>
  
  <p>Here is the versions of some of the gems I am using:</p>
  
  <pre><code>rails (4.2.0)
  bootstrap-sass (3.3.3)
  sass-rails (5.0.1)
  </code></pre>
  
  <p>The project is an AngularJS project sourcing the following gems from <a href="http://rails-assets.org" rel="nofollow noreferrer">Rails Asset</a>:</p>
  
  <pre><code>rails-assets-bootstrap-additions (0.2.3)
  rails-assets-angular-bootstrap (0.11.2)
  rails-assets-bootstrap-sass-official (3.3.3)
  </code></pre>
  
  <p>Following the <a href="https://github.com/twbs/bootstrap-sass" rel="nofollow noreferrer">README on the bootstrap-sass Github page</a>, I renamed my <code>app/assets/stylesheets/application.css</code> file to <code>application.scss</code> and replaced its content by:</p>
  
  <pre><code>@import "bootstrap-sprockets";
  @import "bootstrap";
  </code></pre>
  
  <p>Here is the error I get when I launch <code>RAILS_ENV=production rake assets:precompile --trace</code>:</p>
  
  <pre><code>** Execute assets:precompile
  rake aborted!
  Sass::SyntaxError: Undefined variable: "$alert-padding".
     (in /home/owner/.rvm/gems/ruby-2.1.5/gems/bootstrap-sass-3.3.3/assets/stylesheets/bootstrap/_alerts.scss:10)
  </code></pre>
  
  <p>I looked into ClothSword's answer to <a href="https://stackoverflow.com/a/21935120/378253">this similar post</a>, but in my case <code>puts config.assets.precompile.inspect</code> outputs <code>(lambda)&gt;, /(?:\/|\\|\A)application\.(css|js)$/]</code>, which I believe to be the default.</p>
  
  <p>Would anyone have more insight on this? You can browse the source <a href="https://bitbucket.org/fuzzybird/tealure-spree/src" rel="nofollow noreferrer">here</a></p>