Installing Sass and Using SCSS Watcher for PhpStorm on OSX Yosemite

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:

bash: sass: command not found

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

  1. Install Rails. I did this using: sudo gem install rails
  2. 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.