Bootstrap: Correct import order of _custom.scss and _variables.scss?

[constructit]

Docs explain:

Copy and paste relevant lines from _variables.scss into the custom file

Currently bootstrap.scss imports _custom.scss before _variables.scss which seems to make any variable declaration within _variables.scss unavailable for use within _custom.scss.

@import "custom"; // (contains customization for: $lead-font-size)
@import "variables";

Error: Undefined variable: "$lead-font-size".

Whereas when I swap the order of these two files it compiles without errors.

@import "variables";
@import "custom"; // (contains customization for: $lead-font-size)

[mdo]

So the problem here is using _custom for _changing_ variables vs being able to do that and use the other variables. I think we can safely change this...

[daniellangnet]

@mdo I think this introduced a new issue, which is that now you can't overwrite variables like $border-radius anymore. If you do that, it has zero effect. The reason is that other values are inferred in the _variables.scss file that have already used the default supplied value.

I understand the intent of this change, but I think it should be reverted back in order to provide greatest flexibility. What @constructit originally wanted to achieve is still possible, it just requires a little extra work because all the referenced variables need to be copied over and declared in the _custom.scss as well.

[mdo]

@daniellangnet The order has been corrected in v4-dev with _custom.scss coming first once again. Variable overrides need to just remove the !default. The downside is this order doesn't allow for using other variables in this file; it's purely for overrides.

[dbkaplun]

This is problematic as utility variables like $gray-light are inaccessible from custom styles. Or am I misunderstanding?