mit Stiftung 6 scss mit eckigen 2 CLI

8

Wie man Fundament 6 mit angular cli benutzt. Ich habe versucht mit normalem scss, aber konnte nicht mit Fundament 6 scss fortfahren. Wie soll ich damit fortfahren? Vielen Dank im Voraus.

    
user93 10.08.2016, 06:35
quelle

2 Antworten

4

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 .

  1. Installieren Sie die Foundation-Sites über npm
  2. Importieren Sie Foundation-Sites in Ihre Datei vendor.ts. Wie so:

    importieren Sie "Foundation-Sites";

  3. Importieren Sie die scss-Datei der Foundation in Ihrer app.scss wie folgt:

    @import '~ Gründungsseiten / scss / foundation'

  4. 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%     
Frank Spin 10.08.2016, 10:30
quelle
15

Erstellen Sie ein neues "freches" Projekt mit der Angular CLI:

%Vor%

Installieren Sie dann Foundation Sites über NPM:

%Vor%

Importieren Sie abschließend die Foundation SASS-Datei in die Projekte styles.scss :

%Vor%

Für weitere Details: Ссылка

    
Blank 20.09.2016 12:29
quelle