[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!

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 😉

Top comments (6)

mrsjacki • Apr 30 • Edited

The SASSA RSD grant has been a crucial form of support for many people facing financial hardship, especially during tough economic times. It helps cover basic needs while individuals look for stable income opportunities. Checking your application status regularly and keeping your details updated is important to avoid delays or missed payments. Even though the process can sometimes feel slow, staying informed and patient can make a big difference in receiving your grant successfully.