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>
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!
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";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.