Proyectos Angular usando SASS

Cuando los estilos CSS de tu proyecto son simples y breves, como los que hemos estado usando hasta ahora, puedes codificarlos, si lo deseas, directamente en CSS. Sin embargo, esto no es lo habitual. Normalmente, un proyecto medianamente aspiracional emplea hojas de estilos largas y complejas.

En ese caso, es mucho más que probable que quieras codificar tus estilos en SASS. Si has experimentado con esta tecnología, seguro que, de ningún modo, querrás trabajar tus hojas de estilos sin ella. Si no estás familiarizado con SASS, puedes leer estos artículos. Seguro que luego ya no querrás volver atrás.

Afortunadamente, con Angular 6 es muy simple trabajar con SASS, en lugar de con CSS. En este artículo vamos a contemplar dos posibles escenarios:

  • El proyecto nuevo. Cuando creamos un proyecto nuevo, podemos, desde el principio, empezar con SASS. Es, desde luego, la forma más fácil de hacerlo.
  • El proyecto migrado. Tenemos ya un proyecto creado, con nuestras hojas de estilos en CSS, y queremos empezar a trabajarlo con SASS. Fácil es, desde el punto de vista conceptual, pero también mucho más laborioso al principio.

Veremos en este artículo ambas situaciones.

UN PROYECTO NUEVO

Si vamos a crear un proyecto nuevo en el que ya sabemos que trabajaremos con SASS, en lugar de emplear, directamente, CSS, lo único especial que tenemos que hacer, a la hora de crear el proyecto, es agregar el flag --style=scss, como en el ejemplo a continuación:

ng new ang6-sass --style=scss -p a6s --routing true

Sólo con eso todos los archivos de estilos que se crean por defecto, tanto para el proyecto, como para los componentes nuevos que creemos, se crearán con la extensión .scss, en lugar de la tradicional .css y podremos escribir nuestros estilos directamente en SASS. Cuando queramos ejecutar la aplicación con npm start, o preparar la versión de producción con npm run build, Angular se ocupa por nosotros de transpilar el SASS a CSS en tiempo real, por lo que no tenemos ni que pensar en ello. Más fácil, imposible.

UN PROYECTO MIGRADO

Aquí el tema ya es un poco más laborioso. En primer lugar tenemos que «decirle» al proyecto que, a partir de ahora los estilos van a ser por SASS, en lugar de por CSS. Para ello tecleamos, en la consola de mandatos, dentro de la raíz de nuestro proyecto, la siguiente instruccción:

ng config schematics.@schematics/angular.component.styleext scss

Recuerda que esta instrucción sólo te funcionará en Angular 6, no en versiones anteriores. En Angular 5 y anteriores el mandato ng config era ng set, y tenía su propia sintaxis.

Con esto, al final de angular.json se habrán añadido unas instrucciones adecuadas para que, a partir de ese punto, los archivos de estilos se creen con la extensión .scss, en lugar de .css, y acepten la sintaxis SASS. Si ahora creas un componente nuevo lo harás, como siempre, con la sintaxis siguiente:

ng g c nuevoComponente

Los archivos creados tienen las mismas extensiones para la vista (.html), el controlador (.ts) y el test (.spec.ts), pero la hoja de estilos tiene la extensión .scss. Además, si abres el controlador (nuevo-componente.component.ts) verás que, en la clave styleUrls, dentro del decorador @Component, en lugar de poner ['./nuevo-componente.component.css'] aparece ['./nuevo-componente.component.scss'].

Hasta aquí, todo bien. Pero ¿qué pasa con los archivos de estilos que ya tenemos, y que están referenciados en los controladores de los componentes, o en otros lugares? Bueno. Aquí es donde el tema de la migración se pone engorroso y, dependiendo de la envergadura del proyecto, feo, peludo y con dientes. Piensa una cosa. Si en tu proyecto vas a usar la sintaxis SASS, seguramente querrás, por cuestiones organizativas y de buenas prácticas, tener TODOS tus estilos en SASS.

Lo primero de lo que tienes que ocuparte es de los estilos generales de la aplicación. El archivo src/styles.css debe ser renombrado a src/styles.scss. En el archivo angular.json debes buscar todas las líneas donde se mencione este archivo, y sustituir styles.css por styles.scss. A continucación, y por una cuestión de coherencia programática, debes abrir el nuevo archivo styles.scss y cambiar la sintaxis CSS a SASS. En realidad, esto último no es estrictamente necesario, pero sí muy conveniente, aunque resulte engorroso.

Ahora tienes que ir, componente por componente, renombrando las hojas de estilos, y cambiando el nombre en los correspondientes controladores. Desafortunadamente, no hay un sistema automático para hacer esto. Hay que hacerlo a mano. Y, por seguir haciendo las cosas bien, en cada hoja de estilos deberás cambiar la sintaxis CSS a SASS.

Vamos, que, como tu proyecto esté «crecidito» con ocho o diez módulos, con cuatro o cinco componentes cada uno, tienes unas cuantas horas de trabajo por delante. Afortunadamente, sólo tendrás que hacerlo una vez.

La buena noticia es que en un proyecto Angular pueden convivir perfectamente las dos sintaxis (CSS y SASS). Y, de hecho, si creas un proyecto nuevo con sintaxis SASS, conviven ambas. Cuando instalas una librería externa, esta se descarga con sus hojas de estilos en formato .css, y así las referencias en el archivo angular.json, así que sí, están conviviendo las dos sintaxis. El SASS de tu aplicación y el CSS de las librerías externas. Con un proyecto migrado lo mismo sirve para los estilos de tu aplicación o de tus componentes. Los que no quieras migrar a SASS, no los renombras y te olvidas del tema. Quizá no es la solución más elegante pero, si tu proyecto es muy engorroso, es, sin duda, la más óptima: dejar como está lo que ya tienes, y hacer en SASS lo nuevo que añadas. Te va a funcionar perfectamente ya que, como te he dicho, al compilar en desarrollo o para producción, Angular ya se ocupa de convertir el nuevo código SASS en CSS.

   

Deja un comentario