El conocimiento es el nuevo dinero.
Aprender es la nueva manera en la que inviertes
Acceso Cursos

Cómo simplificar importación de Sass con Angular.json

· 1 min de lectura
Cómo simplificar importación de Sass con Angular.json

Cuando trabajamos con Sass y Angular, importar archivos es una tarea muy común, y si tienes más de 10 archivos y quieres cambiar la ruta de tu estructura sass?

Todos los archivos necesitan ser actualizados y no es algo agradables, deja que Angular te ayude con ello.

Angular.json

Editamos el archivo angular.json, en los estilos agregue el objeto stylePreprocessorOptions con la opción includePaths y defina todas las rutas disponibles en un array con las rutas de sus archivos, debe ser relativo al angular.json

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

Angular compilará utilizando estas rutas, y usted puede eliminarlas de sus archivos, y el compilador encontrará  estos archivos.

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

¡Hecho!

Todo está funcionando con una ruta clara para tus archivos sass y si en el futuro quieres cambiar la ruta o renombrar, solo tienes que editar el archivo angular.json :)

Plataforma de cursos gratis sobre programación

Artículos Relacionados

@for vs *ngFor - Angular 17
· 3 min de lectura
Transformando Input en Angular
· 4 min de lectura