Soporte Scss con Webpack

En este último artículo veremos cómo configurar nuestra aplicación para poder por fin escribir código SCSS y disfrutar de la mejor manera posible sus funcionalidades.

También en esta ocasión necesitaremos instalar algunos paquetes NPM y modificar el webpack.config, añadiendo un Loader apropiado para la carpeta SCSS. 

Anteriormente hemos instalado los Loader para la gestión de las hojas de estilo. El uso de css-loader y de style-loader lo podéis ver en este punto dentro del webpack.config.

Para poder usar el SCSS se necesita instalar el sass-loader y sass, como hemos indicado en la documentación. El proceso es siempre el mismo, se empieza instalándolos desde la línea de comandos.

Después necesitamos modificar el Loader anterior creado para apoyar la carpeta CSS de esta manera:

Recordando siempre que el primer Loader que se tiene que seguir es el sass-loader y después se sube.

La primera prueba para la correcta verificación del soporte SCSS es renombrar la carpeta style.css en style.scss y actualizar también import nell’index.ts

Actualización de importación

Ahora al reiniciar el dev-server o haciendo o iniciar una nueva compilación, todo funciona sin problemas. Una señal de que Webpack puede leer correctamente la nueva extensión.

Ahora hagamos un ejemplo más concreto, instalamos bootstrap e intentamos importarlo a través de Webpack en la carpeta style.scss

Siempre desde la línea de comandos:

Esperamos y a penas habrá terminado importamos bootstrap como haremos a continuación, línea 1 del style.scss:

Si teníais el dev-server iniciado, tendría que haber rellenado automáticamente las nuevas modificaciones, si no simplemente tenéis que comenzar una nueva compilación con npm run build.

Os daréis cuenta que Webpack tiene ya importado correctamente bootstrap, inspeccionando el tag style en el head del browser, como muestro aquí abajo.

Webpack ha añadido todo el código de Bootstrap en el tag style. De hecho, desde este momento es posible aprovechar de todas las clases de bootstrap, por ejemplo añadiendo la clase bg-warning, de bootstrap, en nuestro container padre, de esta manera:

el resultado será el siguiente:

CONCLUSIONES FINALES

Hemos llegado al final de esta serie sobre Webpack. Seguramente uno de los argumentos, a mi parecer, más interesante y más difíciles de todo el panorama del Frontend.

Conocer las bases, saber cómo trabajan con las tareas que usamos así con tanta facilidad con los más famosos framework en circulación, puede solo mejorarnos como desarrolladores y darnos una visión del conjunto más completa.

Además, en aplicaciones más grandes, a menudo, no es suficiente la configuración estándar de webpack. Puede darse tener que meter mano, mejorar o añadir algunas funcionalidades también en un nivel bajo durante la fase de build.

 El primer paso para ser desarrollador consciente de lo que se hace es conocer que está detrás de las herramientas que utilizamos. No es suficiente con saber usar framework para considerar desarrollador. También es necesario saber cómo tomar decisiones adecuadas en función de la tarea específica a implementar y saber donde poner las manos. Entonces conocer todo lo que es la base es un punto de partida esencial.

Espero que esta mini serie haya aclarado algunos aspectos fundamentales de esta fantástica herramienta.