El poder de angular.json: cómo simplificar y limpiar tus imports de Sass

Cuando trabajamos con Sass y Angular, importar archivos es una tarea cotidiana. El problema aparece cuando tu proyecto crece: ¿qué pasa si tienes más de 10 archivos y decides cambiar la ruta de tu estructura de Sass?

@import 'shared/styles/colors';
@import 'shared/forms/input';
@import 'shared/forms/select';
@import 'shared/mixis/grid';

Tener que actualizar cada archivo no es nada agradable y quita tiempo. Por suerte, Angular puede ayudarnos con esto.

angular.json al rescate

Abre tu archivo angular.json. Dentro de la sección styles, agrega el objeto stylePreprocessorOptions con la propiedad includePaths, y define en un arreglo todas las rutas disponibles hacia tus archivos. Estas rutas deben ser relativas a la ubicación de angular.json.

"styles": [
   "src/styles.scss"
   ],
"stylePreprocessorOptions": {
   "includePaths": [
        "src/share/forms",
        "src/share/styles",
        "src/share/mixins"
        ]
}...

Angular compilará utilizando estas rutas de búsqueda. De este modo, puedes remover los prefijos largos en tus archivos y el compilador los encontrará directamente.

@import 'colors';
@import 'input';
@import 'select';
@import 'grid';

¡Listo!

Todo queda funcionando con rutas limpias y directas para tus archivos de Sass. Si en el futuro necesitas cambiar una ruta o renombrar una carpeta, solo tendrás que editar tu archivo angular.json en un único lugar :)

Foto de fondo creada por whatwolf (www.freepik.com)