LESS and LiveEdit

First off: Thank you JetBrains for an awesome plugin!

Now for the issue at hand.

When using LESS with an automatic compiler (CodeKit etc), LiveEdit does not seem to register the change. Is this because it's only the file that's currently being edited in the IDE that triggers an update?

Any suggestions?


Yes, but I don't understand your problem.

If live edit mode is enabled (View -> Live Edit) and external watching compiler is running (CodeKit in your case), any valid change LESS file will triggger "save all documents".

Do you edit LESS file in JetBrains IDE?


Well, CodeKit compiles the LESS-file into CSS upon saving the document as usual but the changes are not visible in the browser. If I edit the CSS directly, the changes appear in the browser immediately.

I could set CodeKit to automatically refresh the browser when it's done compiling but that kind of defeats the purpose of LiveEdit.

I was just wondering if there's some way to tell LiveEdit to automatically register changes in the LESS-file, subsequentially forcing a recompile and show the changes in the browser.


Reproduced. CodeKit is very, very slow. It takes 30-60 seconds to update/compile on file change, so, LiveEdit works but slowly. http://www.screenr.com/oyf8 Is it true for your case?

In any case, official native compiler is enough and I don't see any reasons to use CodeKit.


Nah, CodeKit compiles in under a second for me. Otherwise I wouldn't be using it ;)

Maybe you're thinking about the project refresh it does on startup?


Ok, my test project is big for CodeKit, in small project CodeKit works fast. But I cannot reproduce your problem. It works for me http://www.screenr.com/8jf8

Ok, do you see log message in CodeKit Log window about file compilaton after change LESS file in WebStorm (or any other JetBrains IDE)?
Can you attach idea log (Help -> Reveal Log In Finder)?
What do you see in extension console (chrome://chrome/extensions/ , check developer mode, Inspect views, open console tab)?


That video only shows CodeKit compiling stuff. That isn't a problem. CodeKit compilation works fine :)

It's just that the changes made in the LESS-file isn't shown directly in the browser after editing the code, as is the case when editing CSS or HTML.

When LiveEdit is enabled and I change something in an HTML-file, I can see the changes, as I type, in the browser. That's the whole point of LiveEdit. This though, does not happen when I edit LESS-files. Since LESS and SASS is such a boon for modern web development I thought it would be nice if this new awesome plugin would support them.


Please see screencast again :) Please pay attention to text color of heading — font color is changed on less file edit. If it is not working for you – it is our bug and I want to fix it.


Aaah… Sorry I missed that in the video :p

Still not working for me though. Maybe if I reinstall the plugin etc…


any updates, solution on this?

I have a similar problem when compiling the less files serverside. (not refreshing css when live edit is on)



I have exactly same issuer here too. Is there any update on this? I am using PhpStorm 7.1


Hi Elena,

Thanks for the link. Indeed, even if I edit the css file the LiedEdit does not be aware of it. So it's not just for LESS.

I hope there will be solutions for this issue soon.

Thanks again.


Please sign in to leave a comment.