Estoy en el proceso de refactorización de una aplicación Angular y, a medida que muevo los componentes a nuevas ubicaciones de directorio, me doy cuenta de que tratar las rutas @import en los archivos SCSS de los componentes se está volviendo un poco tedioso.
Por ejemplo, supongamos que tengo el archivo src/_mixins.scss en la raíz de mi aplicación y el componente src/app/my-widget/my-widget.component.scss importa el SCSS como @import '../../mixins'; . Todo muy bien.
Pero luego decido que my-widget.component es realmente un "componente compartido" bajo otro componente my-thingy.component , así que creo una carpeta shared en src/app/my-thingy y muevo todo lo que estaba en src/app/my-widget en él.
Espero que todavía estés conmigo... Entonces, ahora tengo src/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 sí? ) y todos estos . y / son un poco demasiado.
TL;RD
Sería muy útil si desde el principio pudiera haber importado _mixins.scss en relación con la raíz en todos los archivos SCSS de mis componentes para no tener que seguir jugando con las rutas @import al refactorizar. (por ejemplo, algo similar a @import '~/mixins' ). Existe algo como esto?
Lo que he intentado (y, lamentablemente, ha fallado):
@import '~/mixins'; /** I had real hope for this one **/@import 'mixins'; /** Just being overly optimistic here **/@import '~//mixins'; /** Now I'm just making stuff up **/Entiendo que ya voy a tener que modificar mis archivos mod para que apunten a la nueva ruta del componente con todo este "movimiento de cosas", pero... bueno, una cosa menos, ¿no?
"stylePreprocessorOptions" específicamente.includePaths en la configuración del complemento sassLoader.includePaths al complemento sass.Cualquiera que sea su herramienta de compilación, sass tratará esas rutas como raíz, por lo que puede importarlas directamente, así que con:
includePaths: ["anywhere/on/my/disk"] puede simplemente @import 'styles' en lugar de @import 'anywhere/on/my/disk/styles' .
Si entendí la pregunta correctamente, usar @import 'src/app/...' funciona correctamente.
p.ej
@import 'src/mixins';Tenga en cuenta que no hay una barra invertida inicial en la ruta.
(esto se prueba en Angular 9)
Puede usar {} para hacer referencia al nivel superior de la ruta del proyecto cuando usa meteorito-scss , por lo tanto, algo así funcionará.
@import "{}/node_modules/module-name/stylesheet"; También puede usar el operador tilda ~ Si usa webpack (o angular-cli ), acceda a las bibliotecas en node_modules según lo siguiente: crédito para @splintor
@import "~module-name/stylesheet";