Como Usar SASS en un proyecto de React

Iniciando el proyecto

Para comenzar el proyecto escribimos en nuestra terminal create-react-app nombre-proyecto

create-react-app react-sass-app

Esperamos a que se instalen todas las dependencias que necesita React JS para funcionar y al finalizar tendremos una estructura parecida o igual a esta:

 

Configurar Sass

A la configuración por defecto le vamos a agregar las siguientes dependencias:

node-sass
Este módulo se encarga de compilar los archivos escritos en sass y llevarlos a código css es mucho más rápido y sencillo de configurar comparado con la instalación de ruby.

node-sass-chokidar
Es un wrapper de node-sass con una serie de optimizaciones.

npm-run-all
Simplifica el uso de npm scripts, nos permite ejecutar varios scripts de forma paralela.

Para poder utilizarlos debemos instalarlos como dependencias de desarrollo:

npm install --save-dev node-sass node-sass-chokidar npm-run-all

 

Debemos modificar el package.json, actualmente lo tendremos de al siguiente manera.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

 

Ahora lo vamos a modificar y lo vamos a dejar de la siguiente manera.

"scripts": {
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
  "start-js": "react-scripts start",
  "start": "npm-run-all -p watch-css start-js",
  "build-js": "react-scripts build",
  "build": "npm-run-all build-css build-js",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}

 

Explicando los cambios.

Cuando creamos un proyecto con create-react-app para levantar el servidor de desarrollo tenemos que ejecutar el comando npm start el cual utiliza por detrás el comando react-script start que genera React al crear el proyecto.

Lo que hemos hecho es crear un script que escucha los cambios y compila los archivos con la extension .scss con (watch-css) y otro comando que los deja listos para enviar a producción (build-css)

 

Como usarlo.

Cada vez que necesites un archivo nuevo lo vas a crear con la extensión .scss el script “watch-css” lo va a compilar y generar un archivo con el mismo nombre y extensión .css en una carpeta llamada /css es decir si creas un archivo llamado app.scss se va a compilar a app.css en el mismo directorio donde lo creaste y vas a poder incluirlo en tus componentes

import 'app.css';