Zugriff auf freigegebene Stile von einem Angular2 NgModule

Question

Ich habe ein Angular2-Projekt (generiert von angular-cli). Im Projekt habe ich ein Hauptmodul und ein Untermodul. Das Untermodul stellt ein gut definiertes Konzept dar, so dass es gut passt, um es als (möglicherweise wiederverwendbar) NgModule zu haben.

Das Submodul kapselt die verschiedenen Komponenten ein und legt nur eine Komponente nach außen frei. Das ist alles schön, es funktioniert gut, so dass das Modul wiederverwendbar sein könnte.

Allerdings hat das Modul eine globale Abhängigkeit, die es davon abhält, vollständig entkoppeltes, wiederverwendbares Modul zu sein. Eine scss Datei greift auf eine gemeinsame scss Datei unter Verwendung @import zu. Die gemeinsame Datei scss befindet sich außerhalb des Moduls.

So, insbesondere eine scss Style-Datei innerhalb des Moduls außerhalb des Moduls mit relativen Pfaden zu einer scss-Datei verweist, wie folgt aus:

@import './../../../assets/styles/common-props'; 

Ich will nicht die scss Datei in das Modul kopieren . Was ist der beste Weg, um die gemeinsame Datei scss zu konsumieren, so dass das Modul einfach wiederverwendet werden kann? Gibt es eine Best Practice?

Answer 1

Nicht sicher, ob es hier wirklich eine Best Practice gibt. Alles hängt davon ab, wie Sie externe SCSS-Ressourcen importieren und verwalten möchten.

1. Wenn die SCSS-Ressource durch ein Homebrew- oder NPM-Update aktualisiert werden soll, ist der Import aus dem Quellverzeichnis der richtige Weg.
2. Wenn Sie den Upgrade-Pfad zur SCSS-Ressource manuell steuern möchten, verschieben Sie die Datei einfach in Ihre SCSS-Hierarchie und importieren Sie sie.

Generell bevorzuge ich Ansatz # 2.

Ich habe ein Verzeichnis namens 'libs', dass ich externe SCSS/CSS-Dateien organisieren und einfach aus dieser Ordnerstruktur importieren.

Es gibt Randfälle, wo ich # 1 verwende, aber sie sind selten.