/ / Comment utiliser Foundation 5 avec Compass + SASS? - zurb-foundation, boussole-sass

Comment utiliser Foundation 5 avec Compass + SASS? - zurb-foundation, boussole-sass

Le problème

Fondation 5 est sorti la semaine dernière, c’est génial, mais la nouvelle version nécessite tonnelle pour utiliser F5 avec SASS et la documentation officielle semble être un peu incomplet et immature.

J'essaie de créer un projet en utilisant les étapes proposées par les docs:

[sudo] npm install -g bower

et alors

gem install foundation

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

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Après la compilation Compass, 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

Fichier de configuration de la boussole (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"

car Compass ne parvient pas à importer les fichiers settings et foundation mais je ne sais pas comment le réparer. Toute aide sera très appréciée.

Merci.

Réponses:

8 pour la réponse № 1

Vous devez changer de ligne foundation new MY_PROJECT en remplaçant MY_PROJECT avec le dossier sur lequel vous souhaitez installer le projet. Après cela, confirmez que ces dossiers existent dans le répertoire que vous avez spécifié ci-dessus - "bower_components / foundation / scss"

Lors du démarrage d'un projet courir compass init et alors compass watch (dans Terminal) pour surveiller les changements sur le .sass des dossiers.

Personnellement, Je ne vais pas dans cette voie et utiliser http://koala-app.com/ convertir ou "compiler" mon Sass. C'est GRATUIT et génial.


3 pour la réponse № 2

C'est ce dont parlait SASS. Corrigez-moi si je ne me trompe pas mais que vous n’avez pas besoin du trait de soulignement lors de l’importation d’un fichier "include". Je crée des fichiers sass séparés pour mes variables et mes mix-ins. Ils sont préfixés et soulignés, ce qui signifie un fichier "include". SASS reconnaît @import "variables"; comme @import "_variables.scss". Donc, pour être clair quand il s’agit d’un fichier d’inclusion, le nom du fichier sass n’a pas besoin d’être l’extension _ ou scss.

Je n'ai jamais mis un trait de soulignement avant un fichier d'inclusion nommé _filename.scss.

Il y a probablement un autre problème en cours. Peut-être avec l'installation et les chemins pour bower. Pour ceux qui ont ajouté le trait de soulignement dans le passé et que cela a fonctionné ... eh bien, il vous suffit de contourner ce qui pourrait devenir un problème plus profond par la suite. Vous devez vérifier votre installation.


1 pour la réponse № 3

Dans ton app.sass fichier modifier la ligne suivante

@import "settings";

À

@import "_settings";

Explication

Quand tu cours 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être importé. En ajoutant le trait de soulignement au fichier de paramètres, vous avez spécifié le chemin de fichier correct. Si vous recevez d'autres erreurs comme celle-ci, assurez-vous que le chemin du fichier est correct.


1 pour la réponse № 4

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

Vous devez souligner avant l'importation des 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";

Vous devez également importer les paramètres de la même manière.

Dans mon exemple, j'ai créé style.scss et importé tous les SCSS à l'intérieur:

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

0 pour la réponse № 5

J'ai rencontré ce même problème, mais pour moi, la solution consistait à modifier l’importation des paramètres dans app.scss de:

@import "settings";

À:

@import "foundation/_settings";

Une fois que vous avez fait cela, lancez compass watch encore.


0 pour la réponse № 6

Vous pouvez installer Grunt dans votre projet quiutilise la fonction de surveillance de la boussole, puis quelques autres trucs astucieux pour compiler votre sass et le charger dans le navigateur! Voici un excellent tutoriel sur la façon de le faire fonctionner! (c’est aussi simple que de créer deux nouveaux fichiers à la racine de votre projet, puis d’exécuter quelques commandes à partir de votre ligne de commande! Je le conseille sérieusement!)

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


0 pour la réponse № 7

J'ai eu le même problème. Pour les utilisateurs d'Ubuntu 14.04, assurez-vous 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