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.