Integrar un preprocesador de CSS en un proyecto basado en Webpack abre la puerta a escribir estilos más organizados, reutilizables y potentes. Sass es uno de los preprocesadores más populares porque permite usar variables, mixins y anidamiento, características que CSS por sí solo no ofrece de forma nativa. A continuación se explica paso a paso cómo instalar los paquetes necesarios, configurar las reglas en Webpack y verificar que todo funcione correctamente.
¿Qué paquetes necesitas instalar para usar Sass con Webpack?
Antes de tocar cualquier archivo de configuración, es necesario detener el entorno de desarrollo local y ejecutar la instalación de cuatro dependencias clave [0:18]:
- mini-css-extract-plugin: extrae el CSS del bundle resultante y genera un archivo
.css independiente.
- css-loader: permite a Webpack interpretar archivos CSS e importarlos dentro de los módulos de JavaScript.
- node-sass: motor de compilación que transforma la sintaxis Sass a CSS estándar.
- sass-loader: el loader que conecta node-sass con Webpack para procesar archivos
.scss.
Todos se instalan como dependencias de desarrollo con el comando npm install seguido de la bandera --save-dev [0:30].
¿Cómo se configura la regla de Sass en webpack.config.js?
Una vez instalados los paquetes, el archivo de configuración de Webpack necesita tres ajustes principales [1:05].
¿Cómo crear la regla para archivos SCSS y CSS?
Dentro del arreglo de rules se agrega un nuevo objeto con la propiedad test apuntando a una expresión regular que identifique archivos con extensión .scss o .css. En la propiedad use se pasan los loaders en el orden correcto [1:15]:
- El loader de MiniCssExtractPlugin, que se encarga de extraer el CSS compilado.
- css-loader, que resuelve las importaciones de CSS.
- sass-loader, que compila Sass a CSS.
¿Cómo registrar el plugin de extracción de CSS?
En la parte superior del archivo se crea una constante que referencia al paquete instalado [1:45]:
javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
Después, en el arreglo de plugins, se instancia con new MiniCssExtractPlugin y se le pasa el parámetro filename. Este parámetro define la ruta y el nombre del archivo de salida [2:05]:
javascript
new MiniCssExtractPlugin({
filename: 'assets/[name].css',
})
La notación [name] funciona como una variable que Webpack reemplaza automáticamente por el nombre del entry point.
¿Cómo crear y conectar los archivos Sass con tu componente?
La estructura de carpetas recomendada es crear un directorio assets y dentro de él una subcarpeta styles [2:45]. Allí se coloca el primer archivo Sass, por ejemplo App.scss, con reglas básicas para confirmar que la configuración funciona:
scss
body {
margin: 0;
background-color: red;
}
Para que Webpack procese este archivo, se importa directamente desde el componente que lo necesita. En el caso del componente HelloWorld, la importación luce así [3:20]:
javascript
import '../assets/styles/App.scss';
Es importante calcular bien la ruta relativa: si el componente vive en src/components, hay que retroceder un nivel con ../ para alcanzar la carpeta assets.
Al ejecutar npm run start, Webpack compila el archivo Sass, extrae el CSS gracias al plugin y lo inyecta en la página. Si aparece un error, conviene revisar que el new dentro de plugins apunte a MiniCssExtractPlugin y no a otro plugin copiado por el autocompletado del editor [4:00].
Una vez corregido, el fondo rojo del body confirma que Sass está integrado. Cambiar el color del texto a blanco y ver el reflejo inmediato en el navegador valida que el hot reload también funciona con los estilos [4:40].
Con esta configuración lista, ya puedes aprovechar variables, mixins, anidamiento y todas las ventajas de Sass dentro de tu flujo de trabajo con Webpack. ¿Has probado algún otro preprocesador o prefieres Sass? Comparte tu experiencia en los comentarios.
