Comment déclarer / inclure un dossier scss importé dans ma bibliothèque pour pouvoir l'appeler @import dans les fichiers scss de mon application?

Question

Le but:

@importJ'essaye d'inclure un chemin de ma bibliothèque afin que je puisse utiliser une instruction pour inclure les fichiers scss dans mon application comme ceci:

@import "some-scss-in-my-lib"

Le problème:

Malheureusement, chaque fois que j'essaye de servir mon application, j'obtiens l'erreur de compilation suivante:

SassError: Can't find stylesheet to import.

Ce que j'ai déjà essayé:

• La recherche de la recherche sur Stackoverflow m'a apporté ce fil qui décrit le même problème que celui auquel je suis confronté actuellement. Et j'ai essayé d'inclure le chemin avec la styleIncludePathspropriété, tout comme Zainu l'a suggéré, mais en essayant de servir l'application, j'ai rencontré le problème exact comme décrit dans la section Problème ci-dessus.

• J'ai essayé de définir la stylePreprocessorOptionspropriété comme GreatHawkeye dans le premier message et il était possible d' @importutiliser le fichier scss après utilisation ng build, mais je ne comprends pas comment et pourquoi cela fonctionne, stylePreprocessorOptionsmais pas styleIncludePaths?

• J'ai également essayé une recherche sur Google, ce qui m'a conduit au fil de discussion Impossible d'obtenir les styles regroupés à l'aide de l'option styleIncludePaths où j'ai trouvé une réponse d' Alan Aguis , mais malheureusement, il n'y avait aucune explication réelle à quoi sert vraiment styleIncludePaths. La seule chose qu'Alan Aguis a dit était:

c'est parce que styleIncludePaths est indenté pour autre chose.

Mais comme dit, il n'a pas dit pour ce qu'est exactement styleIncludePaths, ce qui m'a encore plus dérouté.

J'ai également essayé de consulter la page github ng-packagr concernant la documentation sur Ajouter un style Inclure les chemins sur le fil Comment utiliser "styleIncludePaths" mais le résultat était toujours le même et je n'ai pas trouvé de réponse claire à mon problème.

Questions sur ce problème:

1. Quand styleIncludePaths dans ng-package.json est-il utilisé? Est-il utilisé uniquement pour les packages publiés?

2. Quand stylePreprocessorOptions dans angular.json est-il utilisé? Est-il utilisé pour la version dist uniquement après l'exécution de ng build?

3. Quelle est en général la différence entre styleIncludePaths de ng-package.json et stylePreprocessorOptions de angular.json?

4. Comment déclarer / inclure un dossier scss importé dans ma bibliothèque pour pouvoir l'appeler @import dans les fichiers scss de mon application?

Je suis à peu près sûr que je me trompe dans mes suggestions, mais j'aimerais savoir ce qui se passe et comment résoudre mon problème.

Toute aide à ce sujet est, comme toujours, très appréciée! 🙏🏻

Answer 1

Comme répondu sur github , je cite alan-agius4 :

Les chemins d'inclusion sont utilisés par les processeurs CSS lors de la construction d'une bibliothèque pour résoudre les importations lors du traitement des fichiers scss / less / stylus. Dans les fichiers scss non traités de votre navire, ces chemins devront être inclus au niveau de l'application plutôt qu'au niveau de la bibliothèque, car ces fichiers ne seront pas gérés par le pipeline de construction de la bibliothèque, mais par l'application. Ils sont simplement copiés sous forme de fichiers statiques. Si vous ne souhaitez pas inclure de tels chemins au niveau de l'application, vous pouvez utiliser la syntaxe d'importation tilde de webpack, ex:

@import "~/my-lib/scss/mixins”.

Remarque: les fonctionnalités spécifiques de Webpack ne sont pas officiellement prises en charge par l'équipe d'outillage Angular et peuvent être interrompues sans avertissement.