Cómo instalar Sass en un proyecto de React

En los últimos años Sass se ha convertido en un estándar para el desarrollo de código en CSS, ya que aporta un montón de funcionalidades que el CSS nativo no te da.

Pero ¿Cómo instalar sass en tus proyectos de React? Por fortuna es una tarea bastante sencilla y en menos de un minuto lo puede hacer. Así que te traemos una pequeña guía paso a paso de lo que debes hacer.

Instrucciones

#1 Descargar las dependencias

Lo primero que se debe hacer es descargar la dependencia de sass. Para esto puedes usar el gestor de dependencias de tu preferencia, ya sea npm o yarn.

En npm

npm install sass

En yarn

yarn add sass

#2 Crea el archivo sass

Ahora que ya está instalado sass en nuestro proyecto, lo único que tenemos que hacer es importar los archivos como si fueran archivos de texto comunes, solo que hay que cambiar la extensión a “scss.”

Archivo buttons.scss

.button {
	&.primary {
		background-color: blue;
	}
}

Y listo, ya tenemos nuestro archivo sass creado.

Alternativa: Importar dentro del archivo sass

También es posible importar varios archivos en un mismo archivo sass (valga la redundancia). Para ello solo debemos renombrar el archivo y agregarle un guión bajo al inicio “_”. Por ejemplo: _buttons.scss en vez de buttons.scss.

Y luego lo que se debe hacer es importarlo en el archivo scss que será el documento raíz de los estilos con la instrucción @use.

Por ejemplo

styles.scss

@use buttons;

* {
	font-family: sans-serif;
}

Y listo, ahora solo hay que importarlo en el documento. Por cierto, siempre que importes un archivo, debe ir en la parte de arriba del documento, sino te marcará un error.

#3 Importarlo en el documento

Lo último es importar el archivo scss en el componente de tu elección.

En muchos de los casos se importa dentro del archivo principal (ejemplo: app.jsx), pero esto dependerá mucho de la arquitectura de componentes y css que tengas en el proyecto.

Ejemplo

import 'buttons.scss' 

export default BurronPage() {
	return(
		<button className"button primary"/>
				Button 👍
		</button>
	)
}

Consideraciones

• Al ser Sass un preprocesador, como tal no se ejecuta del lado del cliente, así que no te debes de preocupar por el tema del rendimiento de tu aplicación ya que realmente lo que termina recibiendo el usuario es un archivo tipo .min.css.