Come dichiaro / includo una cartella scss importata nella mia libreria in modo da poterla chiamare @import nei file scss della mia applicazione?

Question

L'obiettivo. il gol:

Sto cercando di includere un percorso dalla mia libreria in modo da poter utilizzare @importun'istruzione per includere i file scss nella mia applicazione in questo modo:

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

Il problema:

Sfortunatamente ogni volta che provo a servire la mia applicazione ricevo il seguente errore del compilatore:

SassError: Can't find stylesheet to import.

Quello che ho già provato:

• Cercare la ricerca su Stackoverflow mi ha portato questo thread che descrive lo stesso problema che sto affrontando ora. E ho provato a includere il percorso con la styleIncludePathsproprietà proprio come suggerito da Zainu, ma quando ho provato a servire l'applicazione mi sono imbattuto nell'esatto problema come descritto nella sezione Il problema sopra.

• Ho provato a impostare la stylePreprocessorOptionsproprietà come GreatHawkeye nel primo post ed era possibile @importil file scss dopo l'uso ng build, ma non riesco a capire come e perché funziona stylePreprocessorOptionsma no styleIncludePaths?

• Ho anche provato a cercare su Google che mi ha portato al Thread Unable to get styles bundled using styleIncludePaths option dove ho trovato una risposta di Alan Aguis , ma sfortunatamente non c'era una vera spiegazione a cosa servisse davvero styleIncludePaths. L'unica cosa che ha detto Alan Aguis è stata:

questo perché styleIncludePaths è rientrato per qualcos'altro.

Ma come detto, non ha detto cosa sia esattamente styleIncludePaths, il che mi ha confuso ancora di più.

Ho anche provato a cercare la pagina github di ng-packagr relativa alla documentazione su Add Style Include Paths on the Thread Come usare "styleIncludePaths" ma il risultato era lo stesso e non sono riuscito a trovare una risposta chiara al mio problema.

Domande su questo problema:

1. Quando viene utilizzato styleIncludePaths in ng-package.json? Viene utilizzato solo per i pacchetti pubblicati?

2. Quando viene utilizzato stylePreprocessorOptions in angular.json? Viene utilizzato per la versione dist solo dopo aver eseguito ng build?

3. Qual è in generale la differenza tra styleIncludePaths di ng-package.json e stylePreprocessorOptions di angular.json?

4. Come dichiaro / includo una cartella scss importata nella mia libreria in modo da poterla chiamare @import nei file scss della mia applicazione?

Sono praticamente sicuro di sbagliare nei miei suggerimenti, ma mi piacerebbe sapere cosa sta succedendo e come risolvere il mio problema.

Qualsiasi aiuto su questo è come sempre molto apprezzato! 🙏🏻

Answer 1

Come risposta su GitHub , cito alan-agius4 :

I percorsi include vengono utilizzati dai processori CSS durante la creazione di una libreria per risolvere le importazioni durante l'elaborazione di file scss / less / stylus. Nella spedizione dei file scss non elaborati, questi percorsi dovranno essere inclusi a livello di applicazione invece che a livello di libreria, perché tali file non saranno gestiti dalla pipeline di compilazione della libreria, ma da quella dell'applicazione. Vengono semplicemente copiati come file statici. Nel caso in cui non desideri includere tali percorsi a livello di applicazione, puoi sfruttare la sintassi di importazione tilde di webpack, ad esempio:

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

Nota: le funzionalità specifiche del webpack non sono supportate ufficialmente dal team di strumenti di Angular e potrebbero interrompersi senza preavviso.