Vue CLI CSS pre-processor option: dart-sass VS node-sass?

Question

When creating a new project with CLI (v3.7.0), there is an option to choose between dart-sass or node-sass compiler.

How do these compare to eac

Answer 1

Update 09/17/2020:

As this answer gets up-votes every day, I thought maybe it is worth diving deeper into this topic.

---

Considering sass-lang website:

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

Dart-Sass is fast, but not the JS compiled version. Practically when we say Dart-Sass there are two options:

• Dart-Sass on Dart-VM
• Dart-Sass on NPM which is pure JS compiled version

I compiled Bootstrap 4 Sass file to CSS with Node-Sass, Dart-Sass and Dart-Sass(JS) and you can see the following result:

• In this particular case, two seconds is not a big deal; but consider Dart-Sass(JS) is nine times slower than Dart-Sass(Dart VM) and three times slower than node-sass.
• I had a project with +20 themes, it took 30 seconds with node-sass, but I tried to use Dart-Sass(JS), and it took a century!
• Although Dart-Sass(Dart VM) is the fastest but installing or integrating it is a bit tricky.
• And Node-Sass is considered deprecated.

I blogged about it here, you can read more about it here.