Overriding variables of Bootstrap-Sass

Question

I would like to override the default variables of the bootstrap-sass package.

My core sass file looks like this:

@import "../../vendor/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import "_variables.scss";

My _variables.scss looks like this:

$navbar-default-bg: #fff;

The default variable of the package looks this way:

$navbar-default-bg:                #f8f8f8 !default;

When I put something like:

.navbar-default {background-color: #fff}

in my _variables.scss it will be compiled.

Any suggestions why the default variables aren't overriden?

Answer 1

My mistake was that I need to override the variables before importing the bootstrap-sass package.

So the result should look like this:

@import "_variables.scss";
@import "../../vendor/bootstrap-sass/assets/stylesheets/_bootstrap.scss";