ng-content

ng-content

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

Photo by JESHOOTS.COM on Unsplash

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

Simplificando la importación de archivos sass en componentes

Dany Paredes's photo
Dany Paredes
·Oct 10, 2022·

1 min read

Subscribe to our newsletter and never miss any upcoming articles

Play this article

Table of contents

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

 
Share this