9

The problem

Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature.

I'm trying to create a project using the steps proposed by the docs:

[sudo] npm install -g bower

and then

gem install foundation

No problems here. The problem is when creating a Compass project:

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

After Compass compilation, I get the following error:

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

Compass config file (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"

The SASS file (app.sass):

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

The problem seems to be in config.rb:

add_import_path "bower_components/foundation/scss"

because Compass fail trying to import the files settings and foundation but I don't know how to fix it. Any help will be highly appreciated.

Thanks.

Cartucho
  • 3,257
  • 2
  • 30
  • 55
  • Make sure you have compass installed. See [this answer for more details](http://stackoverflow.com/a/15160452/2491623) – renfredxh Feb 23 '14 at 04:43

7 Answers7

8

You need to change the line foundation new MY_PROJECT by replacing MY_PROJECT with the folder you want to install the project on. After that, confirm that these folders exist on the directory you specified above - "bower_components/foundation/scss"

When starting a project run compass init and then compass watch (in Terminal) to watch for changes on the .sass files.

Personally, I don't go that route and use http://koala-app.com/ to convert or "compile" my Sass. It's FREE and awesome.

Mike Barwick
  • 6,288
  • 6
  • 51
  • 76
  • Thanks very much Mike. I realized that the problem was related with NodeJS and Bower. There was a version conflict with them in my Ubuntu and Bower was not working properly, so the folder `bower_components` was missing and the import fails. I fix the problem re-installing NodeJs following these instructions: http://stackoverflow.com/questions/16302436/install-nodejs-on-ubuntu-12-10 (works with Ubuntu 13.10 too). Thanks! – Cartucho Nov 25 '13 at 03:54
  • 2
    I ran compass init and it FINISHED making a new foundation project. should it be part of the documentation!?! – Seeker Feb 02 '14 at 16:19
3

This is SASS were talking about. Please correct me if i'm wrong but you don't need the underscore when importing an "include" file. I create separate sass files for my variables and my mix-ins. They are prefixed with and underscore which signifies an "include" file. SASS recognizes @import "variables"; as @import "_variables.scss". So to be clear when it is an include file just the name of the sass file is need not the _ or the scss extension.

I have never put an underscore before any include file that I have named _filename.scss.

There is probably another issue going on. Possibly with the install and the paths for bower. For those who did add the underscore in the past and it worked...well you just bypass what could become a deeper issue down the road. You need to check your install.

agon024
  • 1,007
  • 1
  • 13
  • 37
1

I think I had the same error; finally I found in the _settings.scss

You need to underscore before the importing the functions

Before:

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

After:

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

Also you would need to import the settings same way.

In my example I made style.scss and import all the SCSS inside : 

@import "foundation/_settings",  "_normalize", "_foundation";
xyhhx
  • 6,384
  • 6
  • 41
  • 64
Sherif SALEH
  • 97
  • 1
  • 5
1

In your app.sass file change the following line 

@import "settings";

To

@import "_settings";

Explaination

When you run compass watch you got the error 

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

This just means it can't find the settings file being imported. By adding the underscore to the settings file you have specified the correct file path. If you receive any other errors like this, make sure the file path is correct.

zechdc
  • 3,374
  • 9
  • 40
  • 52
0

I encountered this same issue, but for me the solution was to change the import of settings in app.scss from:

@import "settings";

To:

@import "foundation/_settings";

Once you've done that, run compass watch again.

Eric Daams
  • 1
0

You can install Grunt into your project which uses compass's watch function and then some other clever stuff to compile your sass and livereload it in the browser! Here's a great tutorial on how to get it up and running! (it's as simple as creating two new files in the root of your project and then running a few commands from your command line! I seriously advise it!)

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

Thomas_Hoadley
  • 178
  • 12
0

I had the same problem. For Ubuntu 14.04 users make sure nodejs and Bower are working properly. You can follow these instructions here http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283

user3257693
  • 486
  • 3
  • 14