Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct import order of _custom.scss and _variables.scss? #21409

Closed
constructit opened this issue Dec 23, 2016 · 4 comments
Closed

Correct import order of _custom.scss and _variables.scss? #21409

constructit opened this issue Dec 23, 2016 · 4 comments

Comments

@constructit
Copy link

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
Copy link
Member

mdo commented Dec 27, 2016

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
Copy link

@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
Copy link
Member

mdo commented Feb 11, 2017

@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
Copy link
Contributor

dbkaplun commented Jun 8, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants