Übersicht

ich den neuen Angular 2 CLI liebe, konnte ich meine alte Frontstruktur hinein ganz gut wandern. Ich hatte jedoch Schwierigkeiten, Susy (http://susy.oddbird.net/) zu laden. Es ist ein Juwel, das installiert ist und als Mixin verwendet werden kann.Wie Susy verwenden, in Angular 2 CLI

Ich dachte, es war vielleicht ein Problem mit der Verwendung von Mixins, aber ich habe versucht, eine benutzerdefinierte Mixin und es hat gut funktioniert.

installiert, um die GEM

Installation::

Also habe ich folgendes getan

gem install susy

NPM installieren: npm install susy sass-loader --save-dev

Importierte susy in .src/Stile. scss

@import "~susy/sass/susy";

Eingeschlossen in .src/app/app.component.scss

@include container;

wenn ich laufe ng serve Ich erhalte die folgende Fehlermeldung:

ERROR in ./src/app/app.component.scss 
Module build failed: 
    @include container; 
     ^
     No mixin named container 

Backtrace: 
    stdin:2 
     in /Users/allie.munro/Desktop/angular-cli/src/app/app.component.scss (line 2, column 11) 
@ ./src/app/app.component.ts 19:21-52 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

Frage

Wer sieht was ich falsch gemacht oder vermisst habe bei der Installation von Susy in An gular2 CLI? Die Dokumentation sagt, meine Webpack-Datei zu ändern, aber das ist nicht in der Ordnerstruktur enthalten, die ng new appname bietet. Ich bin mir sicher, dass ich es im Ordner node_modules finden kann, aber das scheint mir nicht die beste Vorgehensweise zu sein.

Quelle

2017-02-07 Bromox

Sehen Sie sich den Abschnitt "3rd-party-library-installation" in der Readme-Datei des Projekts an und sehen Sie, ob Ihnen das hilft: https://github.com/angular/angular-cli#3rd-party-library- Installation –

Danke, das hilft leider nicht. Wie jeder hatte Erfolg beim Hinzufügen von Mixins wie Kompass, Susy, Breakpoint. All das funktioniert nicht für mich. – Bromox

Ok, was ich als nächstes versuchen würde wäre, zu https://gitter.im/angular/home zu gehen und die Frage entweder im eckigen oder eckigen Raum zu stellen –

Ich folgte Ihrem Beispiel und bekam es zu arbeiten, außer der Import muss in der .scss platziert werden, die die Mixins verwendet. In Ihrem Beispiel müssen Sie nur die Import-Anweisung in Ihrer app.scss-Datei verwenden und der Container-Mix wird funktionieren.

Ich glaube, dass jede scss-Datei separat kompiliert und auf jede Komponente beschränkt ist. Wenn Sie also ein susy-Raster global verwenden möchten, importieren Sie es in die Hauptstile.scss. Wenn Sie susy mixins in Ihrer App-Komponente benötigen, müssen Sie diese auch dort importieren.

Leider war ich auf keine andere Weise erfolgreich.

Quelle

2017-02-08 22:55:48

Wie Susy verwenden, in Angular 2 CLI

Übersicht

Frage

Antwort

Verwandte Themen