Installing SASS and Using SCSS Watcher for PHPStorm on OSX Yosemite

Standard

My OSX adventure continued today. I’d had no problems installing PHPStorm on my MacBook Air and after I installed Dropbox, all of my applications (hosted on Dropbox and created on a Windows machine) became available on my Mac.

I cloned a working project (Node.js and AngularJS) and wanted to modify it for a proof of concept application. The problem came when I had to modify the .scss  files in the project and have them watched so that they are recompiled whenever a change is made to any of them. PHPStorm’s SASS file watcher had worked brilliantly in my Windows environment but because I cloned an existing project, the settings for that project were also transferred to the new project (including the windows based file watchers).

Frustrated, I shutdown the laptop until I disembarked from the plane and fired it up again after two hours of waiting for my connecting flight. I scoured the web for a solution and while this question pointed me in the right way, my problem wasn’t solved.

I installed sass as the instructions on the website indicated but when I tried to test my installation using sass -v  , I got this error:

 Here’s how I solved the problem. Just two quick steps:

  • Install Rails. I did this using:  sudo gem install rails
  • Re-install Sass, using  sudo gem install sass

When I re-ran  sass -v , the output was correct.

I then restarted PHPStorm and tried to configure the SCSS File watcher and it worked like a breeze.