Why does @use not work in Web Compiler Visual Studio extension?

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;
}