Customization Options docs could be clearer about variable overrides

[ianbrandt]

The customizing options doc says:

Every Sass variable in Bootstrap 4 includes the !default flag, meaning you can override that default value in your own Sass even after that original variable’s been defined. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile.

I read this to mean that I can override variables in my Sass after importing bootstrap.scss:

@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import "my-overrides"

_my-overrides.scss:

$link-color: map-get($my-colors, link);

Per the Sass docs for !default variables:

...if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.

So really, I have to do overrides before Boostrap imports _variables.scss:

@import "my-overrides"
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

I think the docs could be a little clearer in this regard.

[andresgalante]

@ianbrandt I agree with you. Do you want to send a PR to fix it? If not I can send it for you

[Bobeta]

@ianbrandt I read it the same way as you and sent a PR

[mdo]

This has been updated and more is coming in #23611.

[ianbrandt]

Thanks, all!