Live Sass Compiler - @use causes compilation error

I'm using Live Sass Compiler v3.0.0 in my VS Code and it throws a compilation error whenever I use the @use rule to import variables from another file. However, when I use the Sass command line interface (sass --watch) to compile my files, it throws no errors.

Therefore, I want to ask is this caused by a syntax error in my code or a bug of Live Sass Compiler.

Steps to Reproduce

File Structure & Code

This is the file structure of the folder called sass-test that I opened in VS Code:

sass-test
|   style.scss
|   _variables.scss

style.scss

@use "variables";

html {
  color: variables.$primaryColor;
}

_variables.scss

$primaryColor: #ff0000;

Live Sass Compiler Output

Open style.scss in a new tab in VS Code. Then, click the "Watch Sass" button located in the bottom right of the window. Live Sass Compiler would output the following error:

Compiling Sass/Scss Files: 
d:\Web Development\sass-test\style.scss
--------------------
Compilation Error
Error: Invalid CSS after "  color: variables": expected expression (e.g. 1px, bold), was ".$primaryColor;"
        on line 4 of sass/d:\Web Development\sass-test\style.scss
>>   color: variables.$primaryColor;
   ------------------^

--------------------
Watching...
-------------------

Sass CLI Output

Open Terminal and run sass --watch style.scss:style.css. The compiler successfully compiles without any errors:

Compiled style.scss to style.css.

Sass is watching for changes. Press Ctrl-C to stop.

Since my code can compile successfully with Sass CLI, does it mean that my code is syntactically correct and it's caused by a bug from the Live Sass Compiler extension?

Solution 1:

I had same/similar problem two days ago.

@use is a new directive introduced in the new official Version 'Dart Sass' and replaces '@import' which is depricated now.

The popular Extension 'Live Sass Compiler' in VS Code is not longer supported by the maintainer for some time. So unfortunately the Sass Version is not updated in that extension...

In VS Code for 'Dart Sass' I found the the Extension 'DartJS Sass Compiler':
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

Actual I just did a quick testing so I cannot report much about it. But on the first glance it is running well. But as it is another extension you may have to change some settings.

UPDATE

Additional to the above reported exentsion DartJS Sass Compiler with actual SASS version I found an actualised and actual maintained fork of Live Sass Compiler. It has been deep hidden in the searching reuslts. As it is a very popular extension in VS Code here the link to the fork:

https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Remark:

I played arround with both extension. Both are doing the job well and have advantages.

'DartJS Sass Compiler' has the additional possibility for more detailed output like information about sass version and watchers. And additional to included SASS version it allows to use your own SASS version if installed to your system or locally to your project. So there is no/less dependency on updates by the maintainer.

'Live Sass Compiler' runs out of the box with included sass version. As it is a very popular extension in VS Code there is a special advantage: it seems it keeps your settings in the old projects running.

I think both are good solutions.