Estoy en el proceso de refactorización de una aplicación Angular y, a medida que muevo componentes a nuevas ubicaciones de directorio, descubro que esta operación@import Las rutas en los archivos SCSS de los componentes se están volviendo un poco tediosas.

Por ejemplo, digamos que tengo el archivosrc/_mixins.scss en la raíz de mi aplicación y el componentesrc/app/my-widget/my-widget.component.scss importa el SCSS así@import '../../mixins';. Todo bien y bien.

Pero luego decido quemy-widget.component es realmente ser un "componente compartido" bajo otro componentemy-thingy.component, así que creo unshared carpeta debajosrc/app/my-thingy y mover todo lo que estaba ensrc/app/my-widget en ello.

I esperanza todavía estás conmigo ... Entonces, ahora tengosrc/app/my-thingy/shared/my-widget y modifico mi archivo SCSS para importar@import '../../../../mixins'.

Nota: Este es un ejemplo simplificado. Algunos de los caminos se vuelven relativamente profundos (sin juego de palabras ...¿o fue?) y todos estos. y/ son un poco demasiado

TL; DR

Podría sersúper práctico si desde el principio podría haber importado_mixins.scss en relación con la raíz en todos los archivos SCSS de mis componentes para que no tenga que seguir jugando con el@import caminos al refactorizar. (por ejemplo, algo en la línea de@import '~/mixins')Existe algo como esto?

Lo que he intentado (y, lamentablemente, ha fallado):

Entiendo que ya tendré que modificar mis archivos mod para señalar la nueva ruta del componente con todas estas "cosas en movimiento", pero ... bueno, una cosa menos, ¿verdad?