SASS Importing In Wrong Order

If you want to overwrite default Bootstrap variables, you need to import your file before the actual Bootstrap variable partial. It's because all their variables have !default flag. It means that if a variable has already been assigned to, the next time you try to re-assign it, it will ignore that (unless it didn't have a variable assigned in the first place).

For example, let's say that in bootstrap's _variables.scss partial there is:

$brand-primary: #555555 !default;

...then in the next file that you import after, you assign something else to $brand-primary it will be ignored - even if you specify the !default flag again.

So that's why you need to overwrite variable before bootstrap does this.

e.g.

// custom-bootstap.scss contents:

// Core variables and mixins
@import "custom/bootstrap/variables"; // custom/overwritten variables
@import "bootstrap/variables";

@import "bootstrap/mixins";
...

and inside custom/bootstrap/variables:

`$brand-primary: #000000!default;`