Overriding an scss variable by referencing other variable

Question

Technically this isn't a boostrap thing, it's a scss thing, but Bootstrap is the context of which I am having issues. I am changing the default value of some values in bootstrap. One particular variable, I want to reference another bootstrap variable.

So I have my own file:

@import "_variable.overrides.scss";
@import "bootstrap.scss";

my _variable.overrides.scss looks like this:

$secondary: lighten($primary, 10%);

I can't do that because $primary is undefined since I am importing my overrides scss first. If I import boostrap.scss first, it doesn't override, because overrides have to come before the default variable definition.

Is there any way to override one variable by referencing another variable?

Answer 1

Basically, this has been answered before here and here. You need to first @import any variables you want to reference in your custom SCSS..

Since $primary lives in _variables.scss, you need to @import _variables.scss and _functions.scss (since this is ref'd by _variables.scss):

@import "bootstrap/functions";
@import "bootstrap/variables";

Then, as explained in the docs, your custom vars will override Bootstrap's because all the Bootstrap variables use the !default flag, which means they won't take precedence over your custom vars which are imported before Bootstrap. So the entire SCSS would look like (you may need to edit the paths):

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "_variable.overrides.scss";
@import "bootstrap.scss";