found drama

While hacking on a personal project recently, I noticed that WebStorm asked me if I wanted it to watch my SCSS files and automatically recompile them. I knew immediately what this must be (“file watchers!”) and was excited because this was a feature that I’d been missing. How had I not known that this was there?

Probably the reason that I didn’t know the feature was in there was because it was a recent addition: according to this blog post, ¹ they released the File Watchers about a month ago.

The built-in Sass/SCSS support was a nice surprise, but out-of-the-box it’s not a particularly sophisticated solution. (As far as I can tell, it’s just compiling the SCSS to CSS as a 1:1 conversion, in-place in that directory.) Compass offers some more powerful and sophisticated features on top of Sass (such as mapping source and target directories), and what’s more — you manage those more sophisticated features in a config file, and not as a bunch of gnarly command line arguments.

So… I added Compass as an alternative SCSS file watcher in the plugin. Here’s how you can add it, too:

1. In the Settings dialog, find the File Watchers item.
2. Click the + button to add a new watcher config.
3. Enter the following:
   

   Name:	Compass
   Description:	Alternate SCSS:CSS compiler
   Immediate file synchronization	uncheck 2
   File type:	SCSS
   Scope:	Project Files
   Program:	/usr/bin/compass
   Arguments:	compile --config $ProjectFileDir$/config.rb
   Working directory:	$ProjectFileDir$

4. Deactivate the SCSS File Watcher for that project and activate the Compass watcher.

Setting up a File Watcher for Compass in WebStorm.

Voila! WebStorm is now watching your SCSS files and automatically recompiling them with Compass.

I found $ProjectFileDir$ works the best for the Working Directory, but your mileage may vary. If it doesn’t work for you — experiment, see what does, and let me know if perhaps there’s a better, more universal setting. The Compass file watch is working great for me so far, and I miss it already on those projects which have Sass but not Compass.

Apparently, the File Watchers plugin ships as a standard feature for both WebStorm and PhpStorm but it’s also a stand-alone plugin for their other IDEs — so you can download/install it right from inside Idea or RubyMine or any of their other IDEs.

1. Which, looking now — after writing this blog post: it seems that a few folks in the comments have already written posts about how to set up a Compass File Watcher. But since when do people read the comments section of anything?[↩]
2. You could leave this on; but I find that it runs too frequently when it is checked.[↩]

About Rob Friesel

4 Responses to watching Compass files in WebStorm