Wie zu verwenden-Stiftung 5 mit Kompass+SASS?

Das problem

Foundation 5 wurde Letzte Woche veröffentlicht, das ist toll, aber die neue version erfordert die Verwendung bower für die Verwendung von F5 mit SASS und die offizielle Dokumentation zu sein scheint ein wenig unvollständig und unausgereift.

Ich versuche ein Projekt zu erstellen mit der vorgeschlagenen Schritte, die von den docs:

[sudo] npm install -g bower

dann

gem install foundation

Hier gibt es keine Probleme. Das problem ist beim erstellen eines Kompass-Projekt:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Nach Kompass Zusammenstellung, bekomme ich die folgende Fehlermeldung:

directory stylesheets/
    error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
  /home/cartucho/MY_PROJECT/scss
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  /home/cartucho/MY_PROJECT/bower_components/foundation/scss
  Compass::SpriteImporter)
   create stylesheets/app.css

Kompass config-Datei (config.rb):

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

Die SASS-Datei (app.sass):

@import "settings";
@import "foundation";
...

Scheint das problem zu sein, in config.rb:

add_import_path "bower_components/foundation/scss"

weil Kompass, scheitern, versuchen, um die Dateien zu importieren settings und foundation aber ich weiß nicht, wie es zu lösen ist. Jede Hilfe wird sehr geschätzt werden.

Dank.

InformationsquelleAutor Cartucho | 2013-11-24
  1. 8

    Müssen Sie ändern Sie die Zeile foundation new MY_PROJECT durch den Austausch MY_PROJECT mit dem Ordner, den Sie installieren möchten das Projekt auf. Danach bestätigen Sie, dass diese Ordner existieren auf dem von Ihnen angegebenen Verzeichnis oben "bower_components/foundation/scss"

    Wenn Sie ein Projekt starten laufen compass init und dann compass watch (im Terminal) zu beobachten, für änderungen auf der .sass - Dateien.

    Persönlich ich nicht diesen Weg gehen, und verwenden Sie http://koala-app.com/ zu konvertieren oder "kompilieren" my Sass. Es ist KOSTENLOS und genial.

    • Vielen Dank, Mike. Ich erkannte, dass das problem wurde im Zusammenhang mit NodeJS und Bower. Es war ein Versionskonflikt mit Ihnen in meinem Ubuntu und Bower war nicht richtig arbeiten, also den Ordner bower_components fehlte, und der import schlägt fehl. Ich das problem beheben re-Installation von NodeJs Sie die folgenden Anweisungen: stackoverflow.com/questions/16302436/... (funktioniert mit Ubuntu 13.10 auch). Danke!
    • Kompass Uhr " save me ! 🙂 thx
    • Ich lief Kompass init und FERTIG, ein neues foundation-Projekt. sollte es Teil der Dokumentation!?!
    InformationsquelleAutor Mike Barwick
  2. 3

    Dies ist SASS reden. Bitte korrigieren Sie mich, wenn ich falsch bin, aber Sie brauchen nicht den Unterstrich, wenn importieren Sie eine "include" - Datei. Ich erstellen Sie separate sass-Dateien für meine Variablen und meine mix-ins. Sie werden mit einem Präfix und Unterstrich, was bedeutet eine "include" - Datei. SASS erkennt @import "variables"; als @import "_variables.scss". So werden klar, wenn es eine include-Datei nur die Namen der sass-Datei ist, müssen Sie nicht die _ oder die scss Erweiterung.

    Ich habe noch nie mit einem Unterstrich vor jeder include-Datei, die ich genannt habe _filename.scss.

    Es ist wahrscheinlich ein anderes Thema geht. Möglicherweise mit dem installieren und die Pfade für die Laube. Für diejenigen, die es Taten fügen Sie den Unterstrich, in der Vergangenheit und es funktionierte...nun, Sie nur zu umgehen, was könnte zu einem Problem tiefer auf der Straße. Sie müssen überprüfen Sie Ihre Installation.

    InformationsquelleAutor agon024
  3. 1

    In Ihrem app.sass - Datei, ändern Sie die folgende Zeile 

    @import "settings";

    Zu

    @import "_settings";

    Erklärung

    Beim ausführen compass watch Sie habe den Fehler 

    error scss/app.scss (Line 1: File to import not found or unreadable: settings.

    Dies bedeutet nur, es kann nicht finden die Einstellungen-Datei, die importiert werden. Durch das hinzufügen der Unterstrich in der Einstellungen-Datei, die Sie angegeben haben die richtigen Datei-Pfad. Wenn Sie erhalten, alle anderen Fehler wie diese, stellen Sie sicher, dass der Dateipfad korrekt ist.

    InformationsquelleAutor zechdc
  4. 1

    Ich glaube, ich hatte den gleichen Fehler, und schließlich fand ich in der _settings.scss

    Müssen Sie Unterstrich vor dem Import der Funktionen

    Vor:

    //Uncomment to use rem-calc() in your settings
@import "foundation/functions";

    Nach:

    //Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

    Auch würden Sie brauchen, um die Einstellungen zu importieren gleiche Weise.

    In meinem Beispiel habe ich aus Stil.scss und importieren Sie alle SCSS innen : 

    @import "foundation/_settings",  "_normalize", "_foundation";
    InformationsquelleAutor Sherif SALEH
  5. 0

    Begegnete ich das gleiche Problem, aber bei mir war die Lösung, um den import zu ändern von Einstellungen in app.scss aus:

    @import "settings";

    Zu:

    @import "foundation/_settings";

    Sobald Sie das getan haben, führen Sie compass watch wieder.

    InformationsquelleAutor Eric Daams
  6. 0

    Können Sie installieren Grunzen in Ihrem Projekt verwendet-Kompass-Uhr-Funktion und einige andere clevere Sachen zu kompilieren sass und livereload es im browser! Hier ist ein tolles tutorial auf, wie man es zum laufen! (es ist so einfach wie das erstellen zwei neue Dateien in den Stammordner des Projekts, und dann laufen ein paar Befehle von Ihrer Kommandozeile! Ich ernsthaft empfehlen es!)

    http://moduscreate.com/get-up-and-running-with-grunt-js/

    InformationsquelleAutor Thomas_Hoadley
  7. 0

    Ich hatte das gleiche problem.
    Für Ubuntu 14.04 Benutzer sicherstellen, dass nodejs und Bower richtig funktionieren.
    Sie können Folgen Sie diesen Anweisungen hier http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283

    InformationsquelleAutor user3257693
Schreibe einen Kommentar