title: Cannot override Bootstrap variables in Rails 4
body: <p>This is specific to Rails version 4.</p>
  
  <p>I have a fie "custom.css.scss" and am using the bootstrap class' of "navbar navbar-fixed-top navbar-inverse" followed by a div of navbar-inner and div container.</p>
  
  <p>No matter where I put the variables, either before the include @bootstrap or after, I cannot change the black color of the Bootstrap inverse navbar.</p>
  
  <p>Here is the first bit of my "custom.css.scss" file where I just try and set the whole damn thing to purple: </p>
  
  <pre><code>$navbar-inverse-color:                #9b59b6;
  $navbar-inverse-bg:                   #9b59b6;
  $navbar-inverse-border:               #9b59b6;
  $navbar-inverse-link-color:           #9b59b6;
  $navbar-inverse-link-hover-color:     #9b59b6;
  $navbar-inverse-link-hover-bg:        #9b59b6;
  $navbar-inverse-link-active-color:    #9b59b6;
  $navbar-inverse-link-active-bg:       #9b59b6;
  $navbar-inverse-link-disabled-color:  #9b59b6;
  $navbar-inverse-link-disabled-bg:     #9b59b6;
  $navbar-inverse-brand-color:          #9b59b6;
  $navbar-inverse-brand-hover-color:    #9b59b6;
  $navbar-inverse-brand-hover-bg:       #9b59b6;
  $navbar-inverse-toggle-hover-bg:      #9b59b6;
  $navbar-inverse-toggle-icon-bar-bg:   #9b59b6;
  $navbar-inverse-toggle-border-color:  #9b59b6;
  
  
  @import "bootstrap";
  
  /* mixins, variables, etc. */
  </code></pre>
  
  <p>But, it stays exactly the same black (inverse) navbar. The other aspects of the styling (below where it comments for mixins, variables, etc) all work fine and I can change element colour and styling no problem.</p>
  
  <p>I am using bootstrap-sass and sass-rails latest versions with Rails 4.0.3. I have been at this all day long and can see no way to change the bootstrap variables and thus my colours.</p>
  
  <p>Very frustrated and hope someone can help :)</p>
  
  <p>EDIT: Sharing code that gives the navbar (header)</p>
  
  <pre><code>&lt;header class="navbar navbar-fixed-top navbar-inverse"&gt;
    &lt;div class ="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;%= link_to 'Tracker', root_path, id: "logo" %&gt;
        &lt;nav&gt;
          &lt;ul class="nav pull-right"&gt;
            &lt;li&gt;&lt;%= link_to "Home",    root_path %&gt;&lt;/li&gt;
            &lt;li&gt;&lt;%= link_to "Help",    help_path %&gt;&lt;/li&gt;
            &lt;li&gt;&lt;%= link_to "About",   about_path %&gt;&lt;/li&gt;
            &lt;li&gt;&lt;%= link_to "Sign in", "#" %&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>