Opción de preprocesador Vue CLI CSS: dart-sass VS node-sass?

Al crear un nuevo proyecto con CLI (v3.7.0), hay una opción para elegir entre dart-sasso node-sasscompilador.

¿Cómo se comparan estos entre sí, para ser más específicos de lo declarado en los documentos de Vue ?

Un consejo sobre el rendimiento sass

Tenga en cuenta que al utilizar Dart Sass, la compilación sincrónica es dos veces más rápida que la compilación asincrónica de forma predeterminada, debido a la sobrecarga de las devoluciones de llamada asincrónicas. Para evitar esta sobrecarga, puede utilizar el paquete de fibras para llamar a importadores asíncronos desde la ruta del código síncrono. Para habilitar esto, simplemente instale fibras como una dependencia del proyecto:

npm install -D fibers

También tenga en cuenta que, como es un módulo nativo, puede haber problemas de compatibilidad que varían según el sistema operativo y el entorno de compilación. En ese caso, ejecute npm uninstall -D fiberspara solucionar el problema.

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

EDITAR 2020/01: Vue CLI 4.2.2 crear un nuevo proyecto todavía se sugiere dart-sasscomo la primera opción anterior node-sass. Sin embargo, se ha establecido aquí que node-sasses la opción más performativa y casi nadie usa dart-sass (comentario de ccleve).

EDITAR 2020/09: Como Ali Bahrami actualizó su extensa respuesta, dart-sasses la opción preferida ya que node-sassse marca como obsoleta .

Lástima dart-sassque es una versión compilada por JS que tiene un rendimiento deficiente. Sin embargo, sus desarrolladores son muy conscientes de esto y están trabajando para lograr un mayor rendimiento como se indica en este número .

Actualización 17/09/2020 :

Como esta respuesta recibe votos a favor todos los días, pensé que tal vez valía la pena profundizar en este tema.

Considerando el sitio web de sass-lang :

Dart Sass es la implementación principal de Sass, lo que significa que obtiene nuevas funciones antes que cualquier otra implementación. Es rápido, fácil de instalar y se compila en JavaScript puro, lo que facilita su integración en los flujos de trabajo de desarrollo web modernos.

Dart-Sass es rápido, pero no la versión compilada de JS . Prácticamente cuando decimos Dart-Sass hay dos opciones:

• Dart-Sass en Dart-VM
• Dart-Sass en NPM, que es una versión compilada de JS pura

Compilé el archivo Bootstrap 4 Sass en CSS con Node-Sass, Dart-Sass y Dart-Sass (JS) y puede ver el siguiente resultado:

• En este caso particular, dos segundos no es gran cosa; pero considere que Dart-Sass (JS) es nueve veces más lento que Dart-Sass (Dart VM) y tres veces más lento que node-sass.
• Tenía un proyecto con +20 temas, me tomó 30 segundos con node-sass, pero intenté usar Dart-Sass (JS), ¡y me tomó un siglo!
• Aunque Dart-Sass (Dart VM) es el más rápido, instalarlo o integrarlo es un poco complicado.
• Y Node-Sass se considera obsoleto .

Me escribió en su blog acerca de ello aquí, se puede leer más sobre esto aquí.

node-sass puede ser más rápido que dart-sass, pero al momento de escribir este dart-sass es la única biblioteca que implementa la @useregla, que se recomienda encarecidamente @import. Según el sitio web oficial de sass-lang :

¿Qué tiene de malo @import? La @importregla tiene varios problemas graves:

• @importhace que todas las variables, mixins y funciones sean accesibles globalmente. Esto hace que sea muy difícil para las personas (o herramientas) saber dónde se define algo.

• Debido a que todo es global, las bibliotecas deben prefijar a todos sus miembros para evitar colisiones de nombres.

• @extend Las reglas también son globales, lo que dificulta predecir qué reglas de estilo se extenderán.

• Cada hoja de estilo se ejecuta y su CSS se emite cada vez que se @importedita, lo que aumenta el tiempo de compilación y produce resultados inflados.

• No había forma de definir miembros privados o selectores de marcadores de posición que fueran inaccesibles para las hojas de estilo posteriores.

El nuevo sistema de módulos y la @useregla abordan todos estos problemas.

Además, @importse eliminará gradualmente durante los próximos años y, finalmente, se eliminará del idioma por completo.

Para mantenerse actualizado con las mejores prácticas en Sass, debe usar dart-sass (es decir, sass ) por ahora.