Multiple "themes" with SASS Modules

Project description

So I have a project that has two distinct brands within a single application. I have a base set of Styles for the components, and then I have two different entry point Scss files as such:

Brand 1

brand1-index.scss
 - @import brand1-settings-vars.scss
 - @import base-styles-index.scss
 - @import brand1-specific-styles.scss

Brand 2

brand2-index.scss
 - @import brand2-settings-vars.scss
 - @import base-styles-index.scss
 - @import brand2-specific-styles.scss

Base Styles

base-styles-index.scss
 - @import lots-of-small-scss-files.scss
 - @import ... etc.

So as you might guess, since it was a pattern in older sass systems, the colors, fonts, and other vars for each brand are named the same, and are then used within the base styles. There are a total of 15 variables.

What I'm looking for

I'm trying to update this to use the newer module based system, and I don't see any easy way to update this. I want to avoid having to write with statements for every single one of my lots-of-small-scss-files.scss cause that'll be a nightmare, since I'd have to have each var declared in each file with !default to be able to pass them down.

What I would love is if there was a way to create a variables file in my base that is then overloaded by my brand vars, and then I just @use that file within my base, but I am not seeing a way to do that.

I must not be googling the right thing, cause I'm sure someone has needed to do this, but I can't find anything about it.

Suggestions?

So what I described after "What I would love" turns out to be perfectly possibly. You don't need to explicitly assign the variables tho, just use @forward instead of @use on the base style's settings file.

Base Files

Brand Index File