React Sass: Cómo agregar Sass en React más ejemplo

Estos son los pasos que debes seguir si deseas agregar SASS a tu aplicación creada con React.

Paso a paso para instalar SASS en REACT

1. Instalar el nodo-sass: yarn add node-sass
2. Convertir tu .css a .scss (o puedes crear tus propios archivos scss)
3. Importar los archivos .scss en tus componentes React como App.js

Para crear un nuevo proyecto React.js, usaremos el kit de herramientas create-react-app.

Paso 1: Crear un nuevo proyecto React usando create-react-app

npx crear-reaccionar-aplicación reactx

Ahora, la versión actual de React.js es 16.13.1. La versión actual de react-scripts es 3.4.1.

Nota: Este enfoque se aplica a [email protected] y superior

Como puedes ver, la versión react-scripts debe estar por encima de la 2.0.0.

Si estabas creando el nuevo proyecto React en 2020, es 100% probable que tengas una versión superior a la 2.0.0 y puedas continuar sin problemas.

Paso 2: Agregar el módulo Node-sass en React

Ahora, agrega el módulo node-sass usando el siguiente comando.

yarn add node-sass

Paso 3: Convierte el archivo App.css en un archivo App.scss

Cambia el archivo App.css al archivo App.scss y agrega el siguiente código.

$myColor: red;
h1 {
color: $myColor;
margin-left: 20%;
}

Con esto, se ha definido una variable de color cuyo valor es rojo.

No puedes definir ninguna variable en el archivo CSS simple; solo puedes describirlo en archivos de preprocesador como SCSS.

Paso 4: Importar el archivo App.scss dentro del archivo App.js

Ahora, importa el archivo dentro del archivo App.js.

// App.js
import React from 'react';
import './App.scss';
function App() {
return (
<div class="contain">
<h1>Header Component</h1>
</div>
);
}
export default App;

Guarda el archivo, ve a la terminal o CMD e inicia el servidor de desarrollo de React con el siguiente comando.

yarn start

Se abrirá http://localhost:3000 y verás que tu archivo App.scss está funcionando.

Desde el resultado, puedes ver que hemos importado con éxito el Sass en React.js. Cuando creas una aplicación React, usa muchas opciones con respecto al estilo.

Puedes diseñarlos utilizando clases simples, archivos CSS, atributos de estilo o módulos CSS.

La hoja de estilo SCSS es una opción popular y muy apreciada por muchos desarrolladores.

Puedes usarlo sin configuración, comenzando con create-react-app 2 o superior. Sin embargo, si deseas utilizar Sass en la versión anterior de React, puedes configurarlo.

Todo lo que necesitas es el archivo .scss que importas a un componente pero eso no es aconsejable.

---

Conclusión final

Cuando creas aplicaciones web con React.js, sabe que escribir código JavaScript es solo la mitad de la historia. La otra mitad es implementar el diseño usando hojas de estilo.

Cuando la aplicación crece, el uso de hojas de estilo CSS simples puede volverse tedioso e imposible de mantener. Sass y LESS son las dos alternativas más populares.

En este ejemplo, hemos visto que Sass es una de las alternativas más populares a CSS.

Extiende el lenguaje CSS con variables, mixins y otras características. También permite dividir las hojas de estilo en varios archivos.

Los archivos fuente de Sass vienen en dos sabores. Un formato .sass más antiguo, que ahora ha sido reemplazado casi por completo por la sintaxis .scss.

Este último es el superconjunto de CSS y permite pegar el código CSS existente en el archivo SCSS sin problemas.

Sass compila los archivos fuente SCSS en un solo archivo CSS con la opción de minimizar la salida resultante. Como cualquier otra hoja de estilo CSS, el archivo resultante se puede incluir en tu página web.

Muchos frameworks CSS utilizan preprocesadores Sass CSS para generar sus hojas de estilo. En este ejemplo, hemos visto cómo integrar archivos scss en React.

Usando el nuevo enfoque, podemos mantener el tamaño del CSS siempre al mínimo y ofrece la oportunidad, de mantener un marcado más semántico.