Comment utiliser de la Fondation 5 avec Boussole+SASS?

Le problème

La fondation 5 a été publié la semaine dernière, c'est très bien, mais la nouvelle version nécessite d'utiliser bower pour l'utilisation de la touche F5 avec SASS et la documentation officielle semble un peu incomplète et immature.

Je suis en train de créer un projet en utilisant les mesures proposées par les docs:

[sudo] npm install -g bower

et puis

gem install foundation

Pas de problèmes ici. Le problème est lors de la création d'une Boussole projet:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Après Boussole de la compilation, j'obtiens l'erreur suivante:

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

Boussole fichier de config (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"

Le fichier SASS (app.sass):

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

Le problème semble être dans config.rb:

add_import_path "bower_components/foundation/scss"

parce que la Boussole échouer en essayant d'importer les fichiers settings et foundation mais je ne sais pas comment le résoudre. Toute aide sera très appréciée.

Grâce.

Assurez-vous d'avoir une boussole installé. Voir cette réponse pour plus de détails

OriginalL'auteur Cartucho | 2013-11-24

  1. 8

    Vous avez besoin de changer la ligne foundation new MY_PROJECT par le remplacement de MY_PROJECT avec le dossier que vous souhaitez installer le projet. Après cela, vérifiez que ces dossiers existent sur le répertoire que vous avez indiqué ci-dessus - "bower_components/fondation/scss"

    Lors du démarrage d'un projet exécuter compass init et puis compass watch (dans le Terminal) pour surveiller les changements sur le .sass fichiers.

    Personnellement, je ne suis pas aller dans cette voie et l'utilisation http://koala-app.com/ de convertir ou de "compiler" mon Sass. C'est GRATUIT et génial.

    Merci beaucoup Mike. J'ai réalisé que le problème était lié avec NodeJS et de Verdure. Il y avait un conflit de version avec eux dans mon Ubuntu et Bower ne fonctionnait pas correctement, de sorte que le dossier bower_components a disparu et que l'importation échoue. - Je résoudre le problème de la ré-installation de NodeJs en suivant ces instructions: stackoverflow.com/questions/16302436/... (fonctionne avec Ubuntu 13.10 trop). Merci!
    montre-boussole, sauve-moi ! 🙂 thx
    J'ai couru boussole init et il FINI de faire un nouveau projet de la fondation. devrait-il faire partie de la documentation!?!

    OriginalL'auteur Mike Barwick

  2. 3

    C'est SASS étaient en train de parler. S'il vous plaît corrigez-moi si je me trompe, mais vous n'avez pas besoin de le souligner lors de l'importation d'un fichier "include". Je créer des fichiers sass pour mes variables et mon mix-ins. Ils sont préfixés avec et de souligner ce qui signifie un fichier "include". SASS reconnaît @import "variables"; @import "_variables.scss". Donc, pour être clair, quand c'est un fichier include juste le nom du fichier sass est n'a pas besoin de l' _ ou le scss extension.

    Je n'ai jamais mis un trait de soulignement avant tout inclure le fichier que j'ai nommé _filename.scss.

    Il y a probablement un autre problème se passe. Peut-être avec l'installation et les voies de la charmille. Pour ceux qui n'ont ajouter le trait de soulignement dans le passé et cela a fonctionné...eh bien vous venez de contournement de ce qui pourrait devenir un problème plus profond en bas de la route. Vous devez vérifier votre installation.

    OriginalL'auteur agon024

  3. 1

    Dans votre app.sass changement de fichier la ligne suivante 

    @import "settings";

    À

    @import "_settings";

    Explication

    Lorsque vous exécutez compass watch vous avez l'erreur 

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

    Cela signifie simplement qu'il ne peut pas trouver le fichier de paramètres importés. En ajoutant le trait de soulignement pour le fichier de paramètres que vous avez spécifié le chemin d'accès au fichier. Si vous recevez des autres erreurs de ce type, assurez-vous que le chemin d'accès du fichier est correct.

    OriginalL'auteur zechdc

  4. 1

    Je pense que j'ai eu la même erreur, j'ai enfin trouvé dans le _settings.scss

    Vous avez besoin pour souligner avant de l'importer les fonctions

    Avant:

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

    Après:

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

    Aussi vous devez importer les paramètres de la même façon.

    Dans mon exemple, j'ai fait style.scss et d'importer toutes les SCSS à l'intérieur : 

    @import "foundation/_settings",  "_normalize", "_foundation";

    OriginalL'auteur Sherif SALEH

  5. 0

    J'ai rencontré ce même problème, mais pour moi la solution a été de changer l'importation de paramètres dans app.scss à partir de:

    @import "settings";

    :

    @import "foundation/_settings";

    Une fois que vous avez fait cela, exécutez compass watch de nouveau.

    OriginalL'auteur Eric Daams

  6. 0

    Vous pouvez installer Grunt dans votre projet qui utilise la boussole de la fonction de veille et puis quelques autres trucs forts pour compiler votre sass et livereload dans le navigateur! Voici un excellent tutoriel sur la façon de l'obtenir vers le haut et en cours d'exécution! (c'est aussi simple que de créer deux nouveaux fichiers dans la racine de votre projet, puis en exécutant quelques commandes à partir de votre ligne de commande! J'ai sérieusement le conseille!)

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

    OriginalL'auteur Thomas_Hoadley

  7. 0

    J'ai eu le même problème.
    Pour Ubuntu 14.04 utilisateurs de s'assurer que nodejs et Bower fonctionnent correctement.
    Vous pouvez suivre ces instructions ici http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283

    OriginalL'auteur user3257693