[ESP] Cómo agregar SASS a tu proyecto de React

#spanish #react #sass

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!