How to compile Dart Sass with Visual Studio 2019

Viewed 1476

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

3 Answers

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.

You can install dart-sass by command line: npm i dart-sass sass-watch

then define a task by gulpJs --> Install gulpJs

Update
The suggested extensions in this answer are not running in Visual Studio but in Visual Studio Code only. So the suggested solutions in this answer does not work as asked in the question. Thx to feedback of @gt.guybrush to clarify that!


To use @use are only included to the most acutal compiler extensions.

Maybe you like to try:
https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

Or with this version you can use your own SASS installation on your system:
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

More about the situation:
Live Sass Compiler - @use causes compilation error

Related