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)

Question

I am doing an online course on Advanced CSS and Sass and found out that the way it is shown in the course is a bit outdated.

The course uses node-sass in the dependencies, which is deprecated. A direct alternative to this would be to use Dart-sass (I will write my steps to do so in the end, maybe someone will benefit from this :))

Another alternative is to use the VS Code Extension "Live Sass Compiler". It seems that this option is quite well accepted.

However, I wonder what benefits and differences these options have. E.g. I had some troubles with the extension yesterday and then used the dart sass as a dependency and solved my problem this way. Maybe this was due to something wrong in my code, but still, it left me with this question and I think others might have the same in the future.

---

PS: It is my first question here, don't roast me if I did something wrong :D

For those interested in how to change the code from node-sass to dart-sass here are the steps (at least for me these were the steps in the course I did):

1. Install dart sass using the command line: npm i -D sass
2. Change your scripts where it says node-sass to just be sass (in package.json)
3. Change the -w in your watch:sass script to --watch (in package.json)
4. You can also do npm uninstall node-sass to get rid of it

Answer 1

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

Answer 2

I do not know what exact tutorial you are looking at. Also, I am not so experienced at the front-end, but in my opinion, using Sass as a css-preprocessor isn't the best option on production for now.

But, since you are asking how to implement sass, I'll describe a procedure, like you are using React with npx create-react-app.

First, you were right, about using dart-sass over sass. This command should help you with that: npm install --save-dev sass. According to the question, seems you already tried that.

After that, add new script to your scripts in your package.json file: "sass" : "sass src/Sass:src/Css --watch --no-source-map" and you are done.

In my own opinion, I prefer to implement it via npm instead of VSC plugin. It will more stable after all. But if you are using it, for test/study purposes, I think, you could try both.