• Home
  • About me
  • Blog

Configuraci贸n de React con Sass

14 marzo 2018

NOTA: Para las 煤ltimas versiones de create-react-app ( a partir de react-scripts@2.0.0) todo lo que necesitas es instalar node-sass y a帽adir tus archivos .scss o .sass a tus componentes. Este art铆culo es v谩lido para versiones inferiores a la 2.0.0

Para todo esto vamos a utilizar un paquete de npm llamado create-react-app, el cual nos genera la estructura b谩sica de nuestra aplicaci贸n y las configuraciones para enviar nuestra aplicaci贸n a producci贸n f谩cilmente.

Iniciando el proyecto

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

comenzando el proyecto con create-react-app

esperamos mientras se instalan las dependencias necesarias para que create-react-app funcione correctamente y al finalizar tendremos una estructura similar a esta:

+ react-sass-app
 鈥 .gitignore
 鈥 node_modules
 鈥 package.json
 鈥 public
 鈥 README.md
 鈥 src
 鈥 yarn.log

Configurar Sass

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

node-sass

Este modulo se encarga de compilar los archivos escritos en sass y llevarlos a c贸digo css es mucho mas 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:

#Utilizando npm
$ npm install node-sass node-sass-chokidar npm-run-all -D

#Utilizando Yarn
$ yarn add node-sass node-sass-chokidar npm-run-all -D

Debemos modificar el package.json, el cual deber铆a ser similar/igual en los siguientes scripts.

{

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test 鈥 env=jsdom",
    "eject": "react-scripts eject"
  }
}

Modificaremos hasta dejarlos de esta forma:

{

  "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"
  }
}

Entendiendo los cambios.

Cuando iniciamos un proyecto con create-react-app para utilizar el servidor de desarrollo tenemos que ejecutar el npm script 鈥渟tart鈥 el cual utiliza el comando react-scripts start propio del paquete create-react-app.

Lo que hicimos es crear un script que escucha los cambios y compila los archivos con extensi贸n .scss (watch-css) y uno que los deja listos para enviar a producci贸n (build-css)

Ejemplo React + Sass

Como utilizarlo

Cada vez que necesites un archivo nuevo lo vas a crear con la extensi贸n .scss en la carpeta src, el script 鈥渨atch-css鈥 lo va a compilar y generar un archivo con el mismo nombre y extensi贸n .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';

Soporte para compass

Compass es una librer铆a que contiene una serie de reglas y mixins, para los que usamos stylus alguna vez es como un nib, para incluirlo en el proyecto debemos instalar compass-mixins:

$ npm install compass-mixins -D
# 贸
$ yarn add compass-mixins -D

Para utilizar compass debemos agregarlo al principio de nuestro archivo .scss.

tu archivo deber铆a quedar m谩s o menos as铆:

compass in React

Te comparto el repositorio de ejemplo por si tienes alguna duda.