React.js | Compilar Sass

Aunque hay muchas formas de escribir estilos cuando trabajamos con React.js, es bastante habitual usar Sass, que no es más que CSS con superpoderes, para escribir las hojas de estilos pero que requieren de una pequeña librería para compilar lo que hemos escrito en reglas CSS puras. Es aquí donde entraba el archiconocido node-sass que tantos quebraderos de cabeza solía dar, pero…

node-sass y LibSass deprecadas

Revisando los paquetes que se suelen usar y sus versiones para determinar la posibilidad de actualizarlos y ya de paso evitar problemas como el que os conté en este artículo sobre pipelines de Azure DevOps con node, resulta que me he encontrado con que las librerías node-sass y LibSass has sido deprecadas (hace ya algún tiempo) aunque sí que se sigue dando mantenimiento.

Dart Sass como alternativa… deprecada

En su lugar, se nos propone usar Dart Sass, otra librería que tiene el mismo objetivo, compilar los ficheros Sass para generar CSS puro. Pero, oh wait!, cuando accedemos a la página de esta librería, resulta que también está deprecada.

Sass como ¿solución final?

La solución a este «caos» es usar la librería sass que es como se llama actualmente Dart Sass. Como siempre, podemos instalarla global o sólo para el proyecto.

Instalación global

npm install -g sass

Instalación en proyecto

npm install --save-dev sass

Conclusión

Como siempre, aunque no es una tarea agradable ni rápida, no olvidéis revisar vuestras librerías para aseguraros de que está todo en orden porque, aunque no haya ninguna deprecada, puede que haya nuevas versiones que os aporten más seguridad o rendimiento.

Enjoy coding!