sass - Override variables in nested module

Question

Tried many different ways but doesn't seem to work. Hoping someone can shed some light on this

This is what I'm trying to achieve and _variable.scss / _base.scss are coming from a library so I can't modify them

_variables.scss
$color: red !default;

_base.scss
@use 'variable' as base-variable;
.test {
  color: base-variable.$color;
}

my-component.scss
@use '_base'; // I want to modify the color in this file, how should it be done?

**expected output
.test {
  color: **another color**;
}

question from:https://stackoverflow.com/questions/65661284/override-variables-in-nested-module

Answer 1

I finally figured it out, you can override the whole imported module.

my-component

@use 'variable' as base-variable with (
  $color: 'another-color'
);
@use '_base'