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

@Alex Objelean I use less.js only for development which is what I'm doing now. In production a compiled css will be used. — Asken, Feb 19 '13 at 07:47

score 1 · Answer 1 · answered Feb 15 '13 at 19:57

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.

answered Feb 15 '13 at 19:57

Chris Jaynes

2,868
30
29

It's a solution but not the one I'm hoping for. – Asken Feb 19 '13 at 07:51

Chris Jaynes · Answer 2 · 2013-02-19T20:22:25.377

Remy Sharp recently wrote a post about how newer versions of Chrome support the ability to save files that you edit in the dev tools back to the file system.

He advocates Never having to leave devtools. Just do your edits right in the browser. The advantage to this solution for you is that you could continue to use the client-side Less compiler.

(I still like my robust text editors and command-line too much to ditch them entirely, but thought this answer would likely appeal to at least a few people who arrived at this question.)

score 0 · Answer 3 · answered Apr 12 '13 at 13:49

0

Here's another quick way.

watch -n 1 touch black.less

answered Apr 12 '13 at 13:49

Richard Ayotte

5,021
1
36
34

score 0 · Answer 4 · answered Mar 22 '21 at 00:13

This may be too late for op, but I had the same question and maybe others have it too.

less-watch-compiler will watch a directory (and sub-directories) for changes and compile any less code to a destination folder. The cool bit is that you can specify the main file and only the main file will be compiled when any file in the source directory is changed.

Usage:

less-watch-compiler [options] <source_dir> <destination_dir> [main-file]

lesscss import and watch

4 Answers4

Linked