lesscss import and watch

Question

I have two files: black.less

/* imports */
@import "elements.less";
@import "crush.less";
@import "tree.less";

I'm using the less watch functionality by adding:

 less.watch();

Sure enough I can see the traffic getting black.less. Black.less hasn't changed though so any change in any of the files being imported is not counted as a change and the style is not updated.

If I however touch black.less the style updates as it should.

Is there a way to automatically update regardless of if it's an imported file or the actual less file being added to the page i.e. so that I only have to change let's say tree.less.

/K

Answer 1

I use Grunt and the grunt-contrib-less plugin to watch all of my less files and compile them into CSS as they change.

Then I use live.js in the browser to watch the CSS files.

The advantage to doing it this way is that I can do the same thing with my HTML and JS files, as well as run tests, lint my JS files, etc.