Cuando empecé a experimentar con SASS, lo primero que hice fue buscarme un plugin de VSCode para que agregase la herramienta automáticamente a mi sistema; sin embargo, cuando comencé a trabajar en proyectos conjuntos con personas que utilizaban otros editores de código, la utilización del plugin se convirtió en un problema.

A principios de año me tomé el tiempo de revisar varios videos de YouTube y encontré una manera bastante rápida y fácil de agregar SASS a un proyecto de React que recién comienza (¡para los que van avanzados también se puede adaptar!)

Seguro hay mil maneras más de hacerlo, pero esta es la que yo encontré y me ha funcionado muy bien.

AQUÍ VAMOS:

• Crea tu proyecto de React en el editor de código que quieras.

• Abre la terminal que usas siempre y escribe

npm install --save-dev node-sass

• Crea una carpeta llamada Styles dentro de tu carpeta src.

• Dentro de la carpeta Styles crea un archivo variables.scss.

• Cambia App.css a App.scss sobre-escribiéndolo y mueve el archivo dentro de la carpeta Styles

• Ve a App.js y cambia App.css a App.scss. Esto debería aparecerte en la parte superior, donde están los archivos importados (imports).

• Dentro de App.scss importa tu archivo de variables (variables.scss)

• ¡LISTO!

Si te da flojera seguir estos pasos o estás muy apurado, cree un repo descargable que ya tiene todo esto implementado. ¡Lo puedes usar sin problema!

¡Aquí está!

¿Se rompió todo? ¿Le ves algo raro? Avísame y lo arreglamos 😉