How to compile Dart Sass with Visual Studio 2019

Question

Until now i use Web Compiler by Mads Kristensen but now i'am facing problems compiling new sass commands like @use or using some css calculation like

grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));

i found a new implementation of sass: Dart Sass but don't find any extension to manage it in visual studio, only some for visual studio code

Web compiler last update was in 2018

i try also Sass compiler but get same compilation error:

200px,(100% - (var(--n) - 1)*10px)/var(--n) was not a correct value for max

even if it's pure working css, maybe it's too new and compiler does not recognize it

only way for now is to put that rule in pure css file and import it along with css generated by sass but don't seem a good solution

Answer 1

sass dart is not supported in visual studio yet.

Please, vote for the sass dart support here:

https://developercommunity.visualstudio.com/t/Dart-SCSS-Support-Request/1388380

You can use npm package to build your scss files using sass dart, and either npm scripts or a javascript to integrate with visual studio's task runner, but you will still get the syntax errors in Visual Studio's code ditor.