¿Cómo declaro / incluyo una carpeta scss importada en mi biblioteca para poder llamar a @import en los archivos scss de mi aplicación?
La meta:
Estoy tratando de incluir una ruta de mi biblioteca para poder usar una @import
declaración para incluir los archivos scss en mi aplicación así:
@import "some-scss-in-my-lib"
El problema:
Desafortunadamente, cada vez que intento servir mi aplicación, aparece el siguiente error del compilador:
SassError: Can't find stylesheet to import.
Lo que ya probé:
Buscar la búsqueda en Stackoverflow me trajo este hilo que describe el mismo problema al que me enfrento ahora. Y traté de incluir la ruta con la
styleIncludePaths
propiedad tal como sugirió Zainu, pero cuando intenté servir la aplicación, encontré el Problema exacto como se describe en El Problema - Sección anterior.Intenté configurar la
stylePreprocessorOptions
propiedad como GreatHawkeye en la primera publicación y fue posible@import
el archivo scss después de usarlong build
, pero no puedo entender cómo y por qué funciona esto, ¿stylePreprocessorOptions
pero nostyleIncludePaths
?También intenté buscar en Google, lo que me llevó al hilo No se pueden agrupar los estilos usando la opción styleIncludePaths, donde encontré una respuesta de Alan Aguis , pero desafortunadamente no había una explicación real para qué es realmente styleIncludePaths. Lo único que dijo Alan Aguis fue:
eso se debe a que styleIncludePaths tiene sangría para otra cosa.
Pero como dije, no dijo qué es exactamente styleIncludePaths, lo que me confundió aún más.
También intenté buscar la página de github ng-packagr con respecto a la documentación sobre Agregar estilo Incluir rutas en el hilo Cómo usar "styleIncludePaths" pero el resultado fue el mismo y no pude encontrar una respuesta clara a mi problema.
Preguntas sobre este problema:
¿Cuándo se usa styleIncludePaths en ng-package.json? ¿Se usa solo para paquetes publicados?
¿Cuándo se usa stylePreprocessorOptions en angular.json? ¿Se usa para la versión dist solo después de ejecutar ng build?
¿Cuál es en general la diferencia entre styleIncludePaths de ng-package.json en comparación con stylePreprocessorOptions de angular.json?
¿Cómo declaro / incluyo una carpeta scss importada en mi biblioteca para poder llamar a @import en los archivos scss de mi aplicación?
Estoy bastante seguro de que me equivoco en mis sugerencias, pero me gustaría saber qué está pasando y cómo resolver mi problema.
¡Cualquier ayuda en esto es como siempre muy apreciada! 🙏🏻
Respuestas
Como se respondió en github , cito alan-agius4 :
Los procesadores CSS utilizan las rutas de inclusión durante la construcción de una biblioteca para resolver importaciones al procesar archivos scss / less / stylus. En los archivos scss sin procesar de su envío, estas rutas deberán incluirse en el nivel de la aplicación en lugar del nivel de la biblioteca, porque dichos archivos no serán manejados por la canalización de construcción de la biblioteca, sino por la aplicación. Simplemente se copian como archivos estáticos. En caso de que no desee incluir tales rutas en el nivel de la aplicación, puede aprovechar la sintaxis de importación de tilde del paquete web, por ejemplo:
@import "~/my-lib/scss/mixins”.
Nota: las características específicas del paquete web no son oficialmente compatibles con el equipo de herramientas de Angular y pueden romperse sin previo aviso.