Is It Better to Use the Live SASS Compiler (VS Code Extension) or to Install and Run SASS via Npm? (+ Tips How to Change from Node-Sass to Dart-Sass)

Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)

If you want to use the most actual version Dart SASS with 'Live Sass Compiler' you need to take care about the version. The most popular version is not supported for years so it does not support Dart Sass.

But there is a fork which is supported and as fork you can use same settings.

To your Question about NPM and Live Sass Compiler: both are Javascript Version off Sass. As Javascript versions they are not as fast as if you install SASS direct on your System. The difference between Javascript vesion itself its not as big. So I think the best choice between NPM and Live Sass compiler is to use Live Sass Compiler (the forked version!) as it is integrated to the editor and easier to use direct from there.

If you need a faster solution you really should install the original version. That is not as difficult as it sounds. And there is a VS Code Extension as well wich make it possible to use that original installed version easy direct up from VS Code.

Detailed Information:

Install SASS direct on your system:

https://sass-lang.com/install

Information to the named VS Code extension:

https://stackoverflow.com/a/66207572/9268485

VS Code won't let me compile sass using sass --watch

Head up: there are several way to use SASS with VS Code. But make sure to use the most actual version running with Dart SASS. To install that via NPM here are some information:

Is it better to use the Live Sass Compiler (VS Code extension) or to install and run Sass via npm? (+ tips how to change from node-sass to dart-sass)

And here are some information about using SASS by installing an VS Code Extension which maybe makes it a little bit mor comfortable to use it:

Live Sass Compiler - @use causes compilation error

Live Sass Compiler - @use causes compilation error

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.

Live Sass compiler does not compile list operations

The extension you are using does not seem to be maintained anymore, you can try to use this one instead.

---

Related Topics