Verwenden Sie das angular cli oder das webpack Starterpaket?
Mit webpack ist es sehr einfach Foundation zu implementieren. Im Moment verwende ich Angular2 Webpack Starter .
Importieren Sie Foundation-Sites in Ihre Datei vendor.ts. Wie so:
importieren Sie "Foundation-Sites";
Importieren Sie die scss-Datei der Foundation in Ihrer app.scss wie folgt:
@import '~ Gründungsseiten / scss / foundation'
Fügen Sie Ihre bevorzugten Mixins hinzu.
@include foundation-global-styles; @include Stiftungs-Typografie;
Angular CLI (ohne Webpack)
Um externe SASS-Dateien in Ihr Projekt einzubinden, müssen Sie die angulare CLI-Build-Datei ändern. Der eckige CLI basiert auf dem Ember CLI und verwendet Brokkoli, um Ihre Assets zu kompilieren. Es gibt einen ausgezeichneten Artikel darüber auf der Codemessor-Website .
Kurz gesagt, Sie müssen extra node_modules für Brokkoli installieren und Ihre angular-cli-build.js Datei ändern.
Führen Sie den folgenden Befehl aus, um die zusätzlichen Knotenmodule zu installieren:
%Vor%Als Referenz hier ist mein angular-cli-build.js
%Vor%In Ihrer .scss-Datei können Sie eine Foundation-Sass-Datei wie folgt einfügen:
%Vor%Tags und Links angular angular-cli zurb-foundation-6