1

So I'm building a WordPress theme using Zurb Foundation 6 and Underscores. I installed Foundation via the CLI and have been using Atom with 'foundation watch' in its console without a problem. I decided to try out PhpStorm and have been having some issues getting the SCSS to work right. Hoping someone can help me out...

So I installed a SCSS File Watcher (via Ruby Gems) in PhpStorm and that seems ok, but I keep getting this error:

cmd.exe /D /C call C:/Ruby23-x64/bin/scss.bat --no-cache --update app.scss:../css/app.css

error _settings.scss (Line 44: File to import not found or unreadable: util/util.)

So for some reason it is having problems seeing some of the SCSS files that are supposed to be imported (Atom/GULP didn't have this issue). I read here that I should add the files it's looking for as a "Resource Root" item in the settings menu... but that didn't work either.

If anyone knows how I can get PhpStorm to work right (I can still run 'foundation watch' but PhpStorm complains that variables are being "resolved only by name...") I would really appreciate it. Thanks!

LazyOne
  • 158,824
  • 45
  • 388
  • 391
pinmouse
  • 33
  • 8
  • marking folder as resource root per instructions in https://stackoverflow.com/questions/21987225/webstorm-cannot-resolve-directory won't work here, as it can only fix PhpStorm paths resolving. And it your case the error comes from SASS compiler that can't find imported files. – lena Mar 13 '17 at 14:19

2 Answers2

1

You need to make sure to pass the framework files (node_modules/foundation-sites/scss) as an import path to compiler (see http://foundation.zurb.com/sites/docs/sass.html#compiling-manually). This can be done using -I or --load-path option:

-I, --load-path PATH             Specify a Sass import path.

Just modify Arguments: field of your file watcher accordingly

lena
  • 90,154
  • 11
  • 145
  • 150
  • I appreciate you replying. But I'm just not sure what to do to get this to work still.... I've been messing with it for like an hour now with no luck. If you (or anyone else) can offer a bit more assistance I'd really appreciate it. It's a fresh install of PhpStorm and I'm just trying to get it working right for SCSS with Foundation 6. :( – pinmouse Mar 14 '17 at 06:15
  • 1
    it's not about PHPStorm actually. You just need to make SCSS compiler working in command line. Obviously it can't resolve framework files using URLs in import statements, and you need to pass the directory where the files are located to it using `-I` option – lena Mar 14 '17 at 09:30
0

I could not get the import path for Foundation (or any other module for that matter) to be found for SCSS compilation without doing two things:

1) Go to the SCSS File Watcher and under other options add an environment variable for SASS_PATH and set it to the path to your SCSS lib (/users/me/node_modules/foundation-sites/scss/ in my case)

2) To keep phpStorm from throwing out warnings about the lib not being found I also went to Preferences/ Directories and added the /users/me/node_modules/) directory and marked the foundation-sites/scss/ folder within as a resource route.

It now compiles without warnings from the compiler or from the IDE.

Lance Cleveland
  • 3,098
  • 1
  • 33
  • 36