Bootstrap sass and customized variables.scss

How do you handle your modifications in the variables.scss? I mean simply pulling in Bootstrap and then your variables don't really have effect since it's ignored, pulling in your custom variables before Bootstrap has neither effect as it's overwritten. A solution is to delete the variables and pull mine in before Bootstrap as it can't be overwritten then, but I don't like this solution as I have to do a lot of manual customized setup on every install.

EmilMoe

9 years ago

Level 10

That's the same as loading variables after Bootstrap? For me it seems it's not working because it's already compiled or something or am I wrong?

Like this

@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
@import 'my_bootstrap_customized_variables.scss';

ejdelmonico

9 years ago

Best Answer

Level 53

Variable loading is in a different order in LESS vs. SCSS. If you want to override any bootstrap variables, they should be declared before importing bootstrap.scss. LESS is the opposite order of loading.

1 like

seanwu

9 years ago

Level 6

I know this is not ideal...

You can replicate the @import statements from _bootstrap.scss into your app.scss (with updated paths) and import your variable definition file after the default bootstrap one, your variables should be applied.

EmilMoe

9 years ago

Level 10

Thanks both. It seems to work to load the variables before the Bootstrap files.

Please or to participate in this conversation.