Como declaro / incluo uma pasta scss importada em minha biblioteca para poder chamar @import nos arquivos scss do meu aplicativo?

Aug 17 2020

O objetivo:

Estou tentando incluir um caminho de minha biblioteca para que possa usar uma @importinstruçã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 styleIncludePathspropriedade 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 stylePreprocessorOptionspropriedade como GreatHawkeye no primeiro post e foi possível fazer @importo arquivo scss após usar ng build, mas não consigo entender como e por que isso está funcionando, stylePreprocessorOptionsmas não styleIncludePaths?

  • 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:

  1. Quando styleIncludePaths em ng-package.json é usado? É usado apenas para pacotes publicados?

  2. Quando stylePreprocessorOptions em angular.json é usado? É usado para a versão dist somente após a execução do ng build?

  3. Qual é, em geral, a diferença entre styleIncludePaths de ng-package.json em comparação com stylePreprocessorOptions de angular.json?

  4. 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

2 FyZ1K Aug 24 2020 at 19:30

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.