App.scss Syntax error

[jslanglois]

Hello,

It's the first time i use Foundation (FoundationPress to start), i'm mostly a Bones developper... but i want to give Foundation/FoundationPress a try...

I'm having trouble when i try to save / compile my scss files (Coda / Codekit)
(Note : Node, Grunt, Compass are installed and updated to latest)

Tried to google with no chance...

Here

app.scss error
Syntax error: File to import not found or unreadable: foundation/functions.
Load paths:
xxx/wp-content/themes/accueil-child/scss
xxx/bower_components/foundation/scss
on line 13 of /xxx/wp-content/themes/accueil-child/scss/config/_settings.scss
from line 4 of /xxx/wp-content/themes/accueil-child/scss/app.scss
Use --trace for backtrace.

Thx for the support.

[olefredrik]

Hey. Do you get the same problems if you try to compile the stylesheets with grunt directly from the terminal? All rules for automated tasks are set up in Gruntfile.js. It should definitely be possible to run Codekit, but I'm not sure how to set it up correctly, since I do not use it myself.

[thewebsitedev]

I have tried both and yes these errors are thrown when using Codekit or LiveReload. With grunt there is no issue.

The errors are because there is no foundation folder under scss, this is what I think. I manually added foundation folder inside 'scss' and another foundation folder (with only functions file) inside 'scss/config'. This worked but then app.css file is not minified, you have to do it manually.

[manwithacat]

With Grunt, the inclusion of Foundation's SCSS is provided via a statement in the GruntFile:

sass: {
      options: {
        includePaths: ['bower_components/foundation/scss']
      },

so if you're using a different tool to process the SCSS files into CSS, then you would need to do an equivalent include (or directly copy in the files) to make the Foundation methods available.