Why does #use not work in Web Compiler Visual Studio extension? - sass

Question

I'm running Visual Studio 2019 (16.3.9) using the Web Compiler extension (1.12.394) to compile scss files.
Here is a simple case that works. I have a file - test.scss:
$color: blue;
.button {
background-color: $color;
}
This gets compiled to this:
.button {
background-color: blue;
}
But if I try and do something like what is outlined here - https://sass-lang.com/documentation/at-rules/use#configuring-modules - it doesn't seem to work. I create another file - _base.scss:
$color: red !default;
.button {
background-color: $color;
}
Then I change my test.scss file to this:
#use 'base' with (
$color: blue
);
I expected that the compiled output would be the same as the original example:
.button {
background-color: blue;
}
But this is what I get:
#use 'base' with (
$color: blue
);
My guess is that the compiler is not happy with the #use rule, but I don't see any errors. _base.scss & test.scss are in the same directory. I'm only new to Sass, but surely this should be possible?

Answer 1

This is filed as an issue on Web Compiler on GitHub:
#use does not work
The response is:
#use its currently supported only by dart-sass and other platforms use
#import for now so this is not a Web Compiler issue
I am also new to Sass, and I can't figure out how to tell what version of Sass is supported in Web Compiler. (Edit: Just found SO question Which version of SASS is my WebCompiler extension using?)
Frustrating, because I am struggling with preventing duplicated CSS from #imports and it seems like #use is the answer.

Answer 2

As mentioned, I'm new to Sass so was jumping straight in with the latest features. My first hunch, as mentioned by #Bauke, is that the current version of Web Compiler doesn't support #use (and other new features of Sass).
Based on this, I opted for a workaround with currently supported features that achieves the same result.
_base.scss:
$color: red !default;
.button {
background-color: $color;
}
test.scss:
$color: blue;
#import 'base';
Compiled output:
.button {
background-color: blue;
}