@use does not work

[Bluejanis]

Installed product versions

• Visual Studio: 2017 Professional
• This extension: 1.12.394

Description

I am trying to get the @use syntax to work, but it is not recognized.
Visual Studio highlights the @use: Validation (CSS 4.0): "uses" is not a known '@' directive.
Also when using variables.$test; Visual Studio throws compile error:

Error 0: Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$test;" (86, 32)

Steps to recreate

1. Create partial module: _variables.scss and add a variable $test: #555;
2. Create regular module: site.scss
3. Add '@use "variables"; to the top of Site.scss
4. Add style to Site.scss

.test {
    background-color: variables.$test;
}

Current behavior

Nothing and compile errors.

Expected behavior

https://sass-lang.com/documentation/at-rules/use
@use can be used to import variables and other things from a partial module.

[ShawnDigital]

If I am correctly understanding this source its using node-sass which uses libsass and I found hidden on SASS' website (until you click a little arrow) a notice that @use its currently supported only by dart-sass and other platforms use @import for now so this is not a WebCompiler issue.

Ran across this today. SASS warns to use this instead of @import but this apparently isn't handled by the Web Compiler out-of-the-box. I'm using 2019 v16.4 with 2019 Web Essentials extension.

This is top of scss file...

@use  ".\palette";

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

This is compiled output which causes errors...

@use ".\palette";
html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

[ed3899]

I got the same error while using Dart Sass. Don't know why

[stefangordon]

Seems like a good option here would be to support a configuration option to specify using the sass module instead of node-sass.

[BrokenShoeLace]

@use, @error, @extend aren't recognised in VS 2019. I sent suggest a feature via VS 2019 and they are looking into it.

I am using Web Compiler 1.12.394 from May 2020.

The use of @use isn't supported in all versions of SASS. Web Compiler uses node-sass which is depreciated and will be moving to dart-sass, see: https://www.npmjs.com/package/node-sass; version 5 is the latest but what version is Web Compiler using?

[zedjr]

I am having this same issue. I want to use @extend to keep all my bootstrap css in a scss file and vs 2019 doesn't recognize this. I get no intellisense. The compiling works but i get no intellisense like i need. Other ide's this works in like jetbrains rider. Am wondering now what sass setup do i need for this to work in?

[aayman997]

@zedjr
how do you use the compilerconfig.json file in file watcher?
I can't use it

[omoridi]

Hi, what about @use 'sass:math';