SASS Importing In Wrong Order

Question

I'm currently having an issue with SASS. When using the @import statement, it doesn't seem to acknowledge that I am importing a certain file before the others, causing some variables not to be declared. I am trying to make some simple changes to Bootstrap. The folder structure is as follows:

My app.scss is the main entry point, which is as follows:

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome

//Bootstrap style changes
@import "variables";

@import "components/alerts";
@import "components/buttons";
@import "components/dropdowns";
@import "components/forms";
@import "components/labels";
@import "components/navbars";
@import "components/pagination";
@import "components/panels";
@import "components/progress";

The issue is, the variables file isn't being imported either at all or before the other files are being loaded. This is a rather odd thing that I can't seem to figure out. I'd appreciate any help you can provide :)

Answer 1

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;`