无法覆盖Rails 4中的Bootstrap变量

Question

This is specific to Rails version 4.

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.

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.

Here is the first bit of my "custom.css.scss" file where I just try and set the whole damn thing to purple:

$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. */

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.

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.

Very frustrated and hope someone can help :)

EDIT: Sharing code that gives the navbar (header)

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class ="navbar-inner">
    <div class="container">
      <%= link_to 'Tracker', root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">
          <li><%= link_to "Home",    root_path %></li>
          <li><%= link_to "Help",    help_path %></li>
          <li><%= link_to "About",   about_path %></li>
          <li><%= link_to "Sign in", "#" %></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

Answer 1

The reason is that the variable context/scope is lost. You need to make sure you only import the underscored files directly, then your variables will be recognized.

non-underscored imported scss/sass files will begin their own variable context/scope, ignoring anything above it.

The latest bootstrap top-level file in the version I checked 3.3.1 is _bootstrap.scss . This is a recent change (old was bootstrap.scss ) and I just had to update some project build files when upgrading from 3.1.1. In this case, you may just want to update your bootstrap-sass dependency and it might just start working for you!

Answer 2

Assuming that you're referencing and have configured the Bootstrap gem ('bootstrap' or 'bootstrap-sass'), create a file in the app/assets/stylesheets folder with a name that will that will cause it to load before 'application.scss' (such as '_custom_variables.scss').

Inside this file, before anything else, import "bootstrap/variables", (as specified in the '_bootstrap.scss' file within the gem.) and then make your customizations. This is the 'one little detail' that isn't emphasized in the docs!

Note that these are only Bootstrap variable overrides , your 'regular' customizations will still be in 'custom.css.scss' after Bootstrap has loaded.

Next, reference your customization file in 'application.scss' before the @import "bootstrap" statement.

Example:

In your variable customization file, _custom_variables.scss:

// app/assets/stylesheets/_custom_variables.scss
@import "bootstrap/variables";
$body-bg:    $gray-dark;
$body-color: $gray-light;

In application.scss:

// app/assets/sytlesheets/application.scss   

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "custom_variables";
@import "bootstrap";