Como declaro / incluo uma pasta scss importada em minha biblioteca para poder chamar @import nos arquivos scss do meu aplicativo?
O objetivo:
Estou tentando incluir um caminho de minha biblioteca para que possa usar uma @import
instrução para incluir os arquivos scss em meu aplicativo da seguinte forma:
@import "some-scss-in-my-lib"
O problema:
Infelizmente, sempre que tento veicular meu aplicativo, recebo o seguinte erro do compilador:
SassError: Can't find stylesheet to import.
O que eu já experimentei:
Olhando para a pesquisa no Stackoverflow me trouxe este tópico que descreve o mesmo problema que estou enfrentando agora. E tentei incluir o caminho com a
styleIncludePaths
propriedade exatamente como Zainu sugeriu, mas ao tentar servir o aplicativo, corri para o problema exato, conforme descrito na seção O problema acima.Tentei definir a
stylePreprocessorOptions
propriedade como GreatHawkeye no primeiro post e foi possível fazer@import
o arquivo scss após usarng build
, mas não consigo entender como e por que isso está funcionando,stylePreprocessorOptions
mas nãostyleIncludePaths
?Também tentei pesquisar no Google, o que me levou à opção Thread Incapaz de obter estilos agrupados usando styleIncludePaths, onde encontrei uma resposta de Alan Aguis , mas infelizmente não houve uma explicação real para o que styleIncludePaths realmente serve. A única coisa que Alan Aguis disse foi:
isso ocorre porque styleIncludePaths é indentado para outra coisa.
Mas, como disse, ele não disse exatamente o que é styleIncludePaths, o que me confundiu ainda mais.
Eu também tentei pesquisar a página do github ng-packagr sobre a documentação sobre Adicionar caminhos de inclusão de estilo no thread. Como usar "styleIncludePaths", mas o resultado ainda era o mesmo e não consegui encontrar uma resposta clara para o meu problema.
Perguntas sobre este problema:
Quando styleIncludePaths em ng-package.json é usado? É usado apenas para pacotes publicados?
Quando stylePreprocessorOptions em angular.json é usado? É usado para a versão dist somente após a execução do ng build?
Qual é, em geral, a diferença entre styleIncludePaths de ng-package.json em comparação com stylePreprocessorOptions de angular.json?
Como declaro / incluo uma pasta scss importada em minha biblioteca para poder chamar @import nos arquivos scss do meu aplicativo?
Tenho quase certeza de que estou errado em minhas sugestões, mas gostaria de saber o que está acontecendo e como resolver meu problema.
Qualquer ajuda sobre isso é, como sempre, muito apreciada! 🙏🏻
Respostas
Conforme respondido no github , cito alan-agius4 :
Os caminhos de inclusão são usados por processadores CSS durante a construção de uma biblioteca para resolver importações ao processar arquivos scss / less / stylus. Em seus arquivos scss não processados de envio, esses caminhos precisarão ser incluídos no nível do aplicativo em vez do nível da biblioteca, porque esses arquivos não serão manipulados pelo pipeline de construção da biblioteca, mas pelo aplicativo. Eles são apenas copiados como arquivos estáticos. Caso você não queira incluir esses caminhos no nível do aplicativo, você pode aproveitar a sintaxe de importação de til do webpack, ex:
@import "~/my-lib/scss/mixins”.
Nota: recursos específicos do webpack não são oficialmente suportados pela equipe de ferramentas Angular e podem falhar sem aviso.