How to use file watchers with nested folders and relative paths?

I have a project in which i want to use LESS to compile CSS files.
Project folders tree:

- root
    - themes
        - theme_one
            - less
                - styles.less
                - pages
                    - page.less
            - css
                - styles.css
                - pages
                    - page.css
        - theme_two
            - less
                - styles.less
                - pages
                    - page.less
            - css
                - styles.css
                - pages
                    - page.css


How should i setup file watcher to automatically compile .css file relative to .less file?

For example: when i edit page.less file it works when i setup "Output paths" like this:

../../css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css



But to edit styles.less i need change it to following:

../css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css



If i have just one theme - I could use something like this:

$ProjectFileDir$/themes/theme_one/css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css



But i need it for more then one theme...

Any help would be much appreciated, thank you.
1 comment

Hi there,

Can you keep all LESS files in single folder? I mean -- separate themes ... but one folder: instead of less/styles.less and less/pages/page.less can you just have less/styles.less and less/page.less ?

If yes -- then should work just fine: ../css/$FileNameWithoutExtension$.css

Otherwise I may suggest you this approach:

  1. Create 2 scopes in "Settings | Scopes".
    • one for files in less folder only (should contain less/styles.less only)
    • second for subfolder (should contain less/pages/page.less)
    • (IF all themes have similarly named files/folders .. then file:*/less/styles.less scope pattern for 1st and file:*/less/pages/*.less for second should work)
  2. Create 2 separate file watchers -- one for EACH scope: one for 1st scope (../css/$FileNameWithoutExtension$.css)and another for 2nd one (../../css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css)
0

Please sign in to leave a comment.