PhpStorm: File Watcher set up for SASS

The PhpStorm file watcher set up can be kind of tricky. But it’s definitely good to have it since we don’t have to be dependent upon CodeKit, Koala, etc.

Here’s an example screen shots for the file watcher for PhpStorm. Before you use it, make sure to install Compass SASS compiler. First off, go to Preferences > Tools > File Watchers, and then click add (+) button. (NOTE: It is based on Mac.)

The example is not showing how to set up two individual css file location within a project. You can achieve this to create a scope. This is useful when Layout and Theme in Drupal use different CSS placeholder.

If you use ./css folder as a CSS placeholder across the project, no need the following set up.