Plantilla webpack para trabajar con SASS

Les compartimos una plantilla para que puedas trabajar tus proyectos SASS con webpack.

Rodríguez Patiño, Eduardo
2020-09-20 | 1,025 lecturas

Si has llegado a esta entrada asumismos que sabes que es SASS, sino lo sabes te lo explicaré rapidamente más adelante.

¿Qué hace la plantilla de SASS?

  • Compila archivos scss a un solo CSS.
  • Minifica, retira comentarios para optimizar el fichero final.

¿Qué es SASS?

Es un lenguaje de hoja de estilos en el cual podemos hacer más cosas como declarar variables, definir bucles, usar funciones de ayuda, reutilizar código, etc, haciendo nuestra tarea del trabajo con CSS mucho más sencillo.

Por ejemplo, con SASS podemos ahorrar tiempo evitando la tediosa tarea de repetir código.

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

El resultado sería esto:

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

Otro ejemplo, podemos anidar nuestras reglas evitando de esta manera duplicarlas:

.clase-a {
    background: red;

    .clase-a-item-1 {
        background: yellow;
    }

    .clase-a-item-2 {
        background: blue;
    }
}

El resultado en CSS sería este:

.clase-a { 
    background: red;
}

.clase-a .clase-a-item-1 {
    background: yellow;
}

.clase-a .clase-a-item-2 {
    background: yellow;
}

¿Webpack?

Es el encargado de ejecutar las tareas SASS para convertirlas a CSS y en este tutorial no hay mucha ciencia saber porque te lo he dejado listo solo para ejecutar el comando.

¿Qué necesitamos?

Pues necesitan tener instalado nodejs.

¿Cómo funciona la plantilla?

Al descargar el proyecto todo se centraliza en la carpeta SRC, la cual contiene algunos archivos .scss de ejemplo. Lo ideal cuando trabajamos un proyecto es dividirlo por bloques, secciones o módulos de la web. En este caso lo he divido en carpetas y cada una contiene a su respectivo archivo .scss.

  • src/contac/index.scss
  • src/home/index.scss

Al agregar más archivos .scss vamos a tener que actualizar el archivo config.scss que contiene la llamada a todos estos archivos.

// Sections
@import './src/home/index.scss';
@import './src/contact/index.scss';

Compilando nuestro proyecto SASS a CSS

Finalmente vamos a posicionar nuestro proyecto desde la consola de windows, linux o mac. Y lo que debemos considerar es lo siguiente:

Usando NPM

  1. Instalar las dependencias: npm install
  2. Ejecutar el comando de compilación npm run build

Usando Yarn

  1. Instalar las dependencias: yarn install
  2. Ejecutar el comando de compilación yarn run build

Nota: para ambos casos el paso número #1 solo lo deberemos hacer una vez. Luego que hagamos cambios a nuestros archivos sass basta con el paso #2.

¿Dónde esta mi CSS?

Tu lindo CSS lo encontrarás en una carpeta llamada build con el nombre de app.css. Hay un archivo adicional que es un app.js, ese lo ignoran.

¿No puedo compilar el CSS?

Esto me ha pasado en algunas computadoras y el error es por diferentes versiones de webpack y Node. En todo caso lo he solucionado reinstalando NodeJs a la versión más actual y agregando Webpack de manera global. Del caso contrario, publica tu error y te daré una mano.