PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

Question

How do, using File Watchers in PHPStorm do I set up LESS file watchers output path to do this:

I want:

/project/path/less/dir/file.less

to output to:

/project/path/css/dir/file.css

or

/project/path/less/file2.less

to output to:

/project/path/css/file2.css

I'm not seeing a clear way to make this happen with the Output Path macros in PHPstorm. With the FileDirRelativeToProjectRoot macro, I'm able to get the path to the current directory, but there is no clear way to replace /less with /css in the path.

Answer 1

See my related answer for JADE file watcher, I believe it would be the same for LESS.

The trick is to use $FileDirPathFromParent(dir)$ macro:

$ProjectFileDir$/css/$FileDirPathFromParent(less)$ will produce /project/path/css/dir/ for a file located in /project/path/less/dir/ directory.

Answer 2

I want to compile one less file from

sites/all/themes/bic/res/less/style.less to sites/all/themes/bic/res/css/style.css

Here's what I did

So the Arguments I used is: --no-color $FileName$ ../css/$FileNameWithoutExtension$.css

This will produce: /usr/local/bin/lessc --no-color blogs.less ../css/blogs.css at phpstorm console, and works fine.

I might miss something. Anyway, I tried both "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$" and "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css". Neither of them work for me. So just post my solution here, which might help some people who has the same trouble with me..

Answer 3

Just change Output Path to Refresh to:

../css/$FileNameWithoutExtension$.css

Update:

In the new version of LESS you should reverse your slashes in Path you specify. So it should be:

..\css\$FileNameWithoutExtension$.css

Answer 4

To change output directory for less compiler.
Open edit watcher in tat you will see output paths to refresh in that input box change as like this ../yourfolderpath/$FileNameWithoutExtension$.css. Now you can see less compiles .css to this path.

Answer 5

I had a similar problem with getting scss file watcher to output to the css directory

This is what I did.

1. In Arguments, --no-cache --update $ProjectFileDir$/css/style.css
2. In Output paths to refresh, $ProjectFileDir$/css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css

You can modify this to work with LESS

Answer 6

You may want to try SimpLESS as a watcher for checking/compiling LESS to CSS on the fly - free to use on all platforms.