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?
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:
- In the Settings dialog, find the File Watchers item.
- Click the + button to add a new watcher config.
- Enter the following:
Name: Compass Description: Alternate SCSS:CSS compiler Immediate file synchronization uncheck2 File type: SCSS Scope: Project Files Program:
compile --config $ProjectFileDir$/config.rb
- Deactivate the SCSS File Watcher for that project and activate the Compass watcher.
Voila! WebStorm is now watching your SCSS files and automatically recompiling them with Compass.
$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.
- 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? [↩]
- You could leave this on; but I find that it runs too frequently when it is checked. [↩]
About Rob FrieselSoftware engineer by day, science fiction writer by night. Author of The PhantomJS Cookbook and a short story in Please Do Not Remove. View all posts by Rob Friesel →
4 Responses to watching Compass files in WebStorm
Exactly what I needed and works a charm, thanks for this!
thanks mate! works perfectly
exactly what I needed… thanks!
If you get the latest WebStorm 7 and have SCSS and Compass already installed, then WebStorm will create the watcher for you automatically.