Overriding Bootstrap variables in Rails with bootstrap-sass gem

Question

I am using the bootstrap-sass gem (Bootstrap 3.0) by Thomas McDonald. I've followed the Bootstrap and Rails tutorial by Daniel Kehoe.

I have application.css.scss which has the following at the top:

 /*
 *= require_self
 *= require_tree .
 */

And I have framework_and_overrides.css.scss which has this line in it:

@import "bootstrap";

Now I tried overriding bootstrap variables ( $body-bg: #f00; ) I found here and placing them in either of these two files but nothing changes. What am I doing wrong?

Answer 1

You can override variables by simply redefining the variable before the @import directive.

For example:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

Answer 2

see the execution cycle. in the bootstrap file, files rendering in this manner such us "get variable > and apply in navbar" this really happen when started to execute the bootstrap file. Its present inside of the bootstrap, look the sequential flow of importing . , the variable are getting from bootstrap/variables and setting up the vavbar color in bootstrap/navbar, this applying the color in navbar with the variable navbar-default-bg .

what actually programmers are doing is trying to setup the variable value after setting up the color in navbar. (before or after "@importing bootstrap" statement,the variable changes will not make changes in the navbar color, need to edit in the bootstrap file)

look into the code below if you want to change the color you have to do the following.

inside bootstrap file

// Core variables and mixins

@import "bootstrap/variables";

// Components

@import "bootstrap/navs";

$navbar-default-bg:red; // initialize the $navbar-default-bg (after importing bootstrap/variables)

@import "bootstrap/navbar"; here the color setting is performing"

this will work fine, analyze the execution cycle.

but I am suggesting use the other manual classes for applying the bg-color instead of over riding bootstrap variable.

Ref : https://github.com/RailsApps/rails-bootstrap/issues/12