phpstorm - How do I create a file watcher to generate a stylesheet in its own folder from a group of less files?

Question

How do I create a less file watcher to update css/style.css each time less/style.less is updated?

Assume that style.less imports other less files, like base.less.

Specifically, what would I need to enter in the 'New Watcher' dialog box to create this?

---

Answer 1

1. Track only root files must be enabled -- this will prevent from compiling included/partial files separately -- main file will be compiled instead (which automatically includes all used partial files).

   This way you can modify base.less (partial file used by main style.less) and file watcher will still be triggered for main style.less file.

2. "Arguments" filed should include both source (.less) and target (.css) files, something like this: --no-color $FileName$ ../css/FileNameWithoutExtension$.css

   This tells to use $FileName$ as source file (e.g. style.less) and put it into ../css/FileNameWithoutExtension$.css (e.g. ../css/style.css) -- all paths are relevant to current file (based on "Working directory" field actually, which is by default set to the same folder as the source file)

3. "Output paths to refresh" -- can be empty but better specify the path to generated file there as well (e.g. ../css/FileNameWithoutExtension$.css) -- this will tell IDE what file gets modified (so it will re-read it) as a result of this File Watcher execution.

4. Since now we have specified input and output files as arguments ... you now have to disable Create output file from stdout option .. otherwise IDE will overwrite created file with stdout output (which may result in empty file).

Final File Watcher (here it is done for Windows OS)