Implementando Dark Mode en Gatsby con Sass (1/2)
Tags: react, sass, gatsby, javascript
Published: 2020-01-29 20:15:39

---
title: Implementando Dark Mode en Gatsby con Sass (1/2)
published: true
description: En esta primera parte integramos el preprocesador Sass para estilar nuestros componentes de Gatsby.
tags: #React #Sass #Gatsby #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/solxk1khexzanlycwki6.png
---

| Implementando Dark Mode en Gatsby con Sass|
| -- |
| 1) [Integrando Sass en Gatsby](https://#) |
| 2) [Implementando dark mode con un custom hook y Sass](https://dev.to/jpgallegos1/implementando-dark-mode-en-gatsby-con-sass-2-2-i4n)|

Este artículo será el primero de una serie donde iremos viendo cómo crear diferentes cosas con React y algunos de sus frameworks. Serán de un tamaño pequeño, pero útil, orientado a aquellos que buscan una funcionalidad específica para sus sitios, blogs o portfolio.

Antes de empezar recomiendo tener algo de conocimiento en **React**, **Sass** y en lo posible **Gatsby**, teniendo en cuenta que esto no es una guía introductoria a esas tecnologías.

###**Iniciando el proyecto en Gatsby**
**_Puedes saltear esta parte si ya tienes un proyecto en Gatsby_**

En caso de no tener iniciado un proyecto en Gatsby, lo harémos abriendo una terminal y tipeando `gatsby new gatsby-sass`. En mi caso de ejemplo le puse **gatsby-sass**, pero ponle el nombre que más te guste.

Lo siguiente es entrar a la carpeta donde se creó el proyecto haciendo `cd gatsby-sass` y luego `gatsby develop` para inicializar el modo desarrollo.
**Protip**: En la consola también puedes hacer `cd gatsby-sass && gatsby develop` e inicializará de igual forma. Al final de cuentas debes la consola debe marcarte algo así:

![Gatsby](https://dev-to-uploads.s3.amazonaws.com/i/akw982wymmbe3j8cyf78.png)

Eso lo que nos dice es que debemos entrar a `localhost:8000` y podremos ver nuestro proyecto en modo desarrollo:

![Gatsby](https://dev-to-uploads.s3.amazonaws.com/i/pshcnc7j1e4b3glcj3gv.png)


###**Primeros pasos con nuestra aplicación**
**_Puedes saltear esta parte si ya tienes un proyecto avanzado en Gatsby_**

Abrimos nuestro proyecto con VSCode o el Editor de tu preferencia y lo primero que haremos es limpiar nuestros archivos. 

De la carpeta `components` sólo nos quedaremos con el archivo `layout.js` y en la carpeta `pages` vamos a requerir los tres que vienen por default, pero les haremos unas modificaciones incluyendo a `layout.js`

![Sass](https://dev-to-uploads.s3.amazonaws.com/i/k8huvxgdn11l5b1smldx.png)

De esta forma no debemos tener problemas y veremos que nuestra aplicación -aún sin estilos- está funcionando.

###**Integrando Sass**
**_Puedes saltear esta parte si ya tienes integrado Sass_**

Aquí viene un paso importante: para hacer funcionar a Sass tenemos dos opciones muy comunes: `Live Sass Compiler` [que es una extensión de VSCode](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) o instalar [el modulo](https://www.npmjs.com/package/node-sass?activeTab=versions) `node-sass`. Para este ejemplo utilizaré la primera opción.

Una vez tengamos la extensión instalada, lo siguiente que haremos es ir a nuestra carpeta de `components` y dentro de ésta, agregar otra que en mi caso la llamaré `sass` y la misma tendrá un archivo de nombre `layout.scss`.

Ahora sólo queda importar nuestro `layout.scss` en `layout.js`. Vamos al componente y escribimos `import './sass/layout.css';`. 

Aquí te estarás preguntando "¿por qué .css?". Bueno, esto pasa porque cuando generamos nuestros archivos de Sass, todo lo que hayamos escrito en ese lenguaje termina se mapeando dentro de un .css. Lo terminaremos de entender en el siguiente paso.

**No olvidar**: los navegadores sólo entienden HTML, CSS y Javascript. Sass compila a CSS y React/Gatsby, a JS.

Sólo nos queda hacer click en `Watch Sass`, que en la imagen está ubicado abajo a la derecha, donde -en mi caso ya compiló- dice `Watching...` y una vez compile generará dos nuevos archivos dentro de la carpeta (`layout.css` y `layout.css.map`).

![Gatsby y Sass](https://dev-to-uploads.s3.amazonaws.com/i/afhpysitk4pz5sl26ljt.png)

Genial! Ahora podemos entrar a nuestro `layout.**scss**` y testear que todo funcione correctamente tipeando `body { background: green; }`. Vamos a `localhost:8000` y si tenemos un fondo color verde, significa que ya estamos aptes para integrar el dark mode.