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 :)