How to override theme colors now?
Created by: martinbean
I’ve noticed in _variables.scss that the brand colours have been moved to a nested object.
Up to now, I‘ve been specifying variable overrides in a _custom.scss in my projects like this:
@import "custom";
@import "node_modules/bootstrap/scss/bootstrap";
I’d then override the variables I wanted in my _custom.scss file like this:
$brand-primary: #fc0;
$font-family-sans-serif: "Open Sans", sans-serif;
How do I override values on a per-variable basis now that they’re inside an object? For example, I have a project where I want the brand’s primary color to be green and not blue.
Sorry if this a n00b question, but I’m under the impression that object members like $theme-colors[primary]
aren’t overridable in Sass without overriding the whole object, in which case these seriously reduces the configurability of Bootstrap in version 4.
If I’m doing something wrong, or I can override specific members of objects in Sass, then please let me know.