Cómo importar SCSS en Angular sin rutas relativas ni globales (guía limpia y moderna)

Hace poco retomé un proyecto Angular que tenía el ViewEncapsulation desactivado y todo el SCSS importado globalmente. Clásico setup legacy donde todo se arrastra desde styles.scss, con imports tipo:

Un caos.

Me propuse organizarlo bien, usando las herramientas modernas de SCSS: @use y @forward, y con paths absolutos. Aquí te dejo la guía exacta para no repetir errores y dejarlo todo limpio para el futuro.

Con esto activado, puedes olvidarte de los imports relativos. Ahora:

🔁 Sustituye a:

Este archivo actúa como punto de entrada a todo lo que necesites importar desde cualquier componente.

Aquí es donde cargas los estilos globales.

Una vez configurado todo, en cualquier SCSS de componente, simplemente haces:

Sin rutas locas, sin globales, sin dolores de cabeza.

• Usa @use y @forward en lugar de @import (deprecated).

• Encapsula y organiza: una carpeta abstracts, un index.scss, y listo.

• Carga lo justo: nada de reset.css en todos los componentes.

• Usa ViewEncapsulation.Emulated para evitar fugas de estilos.

• Evita usar as * siempre. Nómbralo cuando puedas: @use 'mixins' as mixins.