LESS Watcher configuration: @import statements and override complexities

I am hoping I can set up the LESS  Watcher for my scenario. I am the front-end developer for a Joomla site which is using a template and theme with overrides in place. My goal is to eliminate the need to compile LESS to CSS via the Joomla admin panel and do it all within PhpStorm. So far this is the only IDE that seems like it will offer all the features I'm looking for.

Here is the setup on the Mac:

The project directory is:


This is the main template less file is:


This file contains nothing but a lot of @import statements which are for many other .less files in the same directory, i.e. blog.less, home.less, etc.

However we are overriding the theme settings with less files in this directory:


These less files are named the same as the ones in the first directory. So if I change home.less in this directory it overrides the one that is imported in the /templates/ja_sugite/less/ directory.

When running the compiler from Joomla's admin area, the final output is:


So I think the changed files need to be watched by the /templates/ja_sugite/less/ directory before compiling the less to this final directory.

Sorry for the confusing explanation, but I am having trouble figuring out how to set up the Watcher. Would I need 2 watchers?

Thanks for any help you can offer!

Comment actions Permalink

It's not a problem to set up a watcher to have the resultant css created in certain folder... But I'm not sure about 'overriding':

So if I change home.less in this directory it overrides the one that is imported in the /templates/ja_sugite/less/ directory.

How does this overriding happen? Does the file in /templates/ja_sugite/less/ directory change? Or, does Joomla use the 'local' file instead of the one that is actually imported into 'main' template.less? In the latter case, I can hardly imagine how this can be done with file watcher - as it will look for files using paths in @import declaration, I'm not sure how you can instruct the compiler to look for same-named files in a different place

Comment actions Permalink


You are right. If there is a file in the local folder with the same name, then Joomla will use that file.

This supposedly makes it so you can update the template without overwriting your local files. Good idea in theory, but it complicates any automation I guess.

I was thinking that if I used 2 watchers and get one to trigger the other this might be possible.

1st watcher: Look for changes in the local directory

2nd watcher: Compile the template.less file in the main directory

It's just that I am not clear on how to use the Watcher dialog box or what the variable settings would be.  

I would really love to avoid doing this via the Admin panel which is so slow. At one point I used a 3rd party LESS compiler locally and then uploaded all the files via FTP. Clunky and prone to error (forgetting to upload stuff). But mainly it means that no other developer can just step in and do it through our versioning system and the IDE.



Please sign in to leave a comment.