css - 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

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.