Phpstorm: How to Setup Less to Output to CSS Directory with File Watcher

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

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.

PhpStorm File Watcher change output

I got it working now with the following settings:

The only difference now is the Output paths to refresh field. It's the default now.

PhpStorm - Sass File Watcher - Output directory of compiled CSS

Already answered here -
https://stackoverflow.com/a/15965088/1389760

I changed my argument path to

--no-cache --update $FileName$:$ContentRoot$/web/css/$FileDirPathFromParent(scss)$/$FileNameWithoutExtension$.css

Changing the macro allowed me to set a parameter that removed the 'SCSS' from the directory path, and it now compiles to the desired location.

Less File Watcher creates empty files in PhpStorm

Uncheck Create output file from stdout in Advanced Options of your File Watcher

Configure Less with PhpStorm doesn't compile

Your File Watcher setup is incomplete.

Right now it will save the generated file next to the source... but you need it 2 folders up.

You did set up correctly in Output paths to refresh .. but that file tells IDE what file to check when file watcher is finished running. It is not where the generated file will be placed.

You need to alter your Arguments field.

• Currently you have ... $FileName$ $FileNameWithoutExtension$.css ...
• You need to adjust the path there -- it has to be ... $FileName$ ../../css/$FileNameWithoutExtension$.css ... -- because that's where you specify such path.

(leading and trailing "..." means other parameters that you have got there)

Setting up LESS file watcher in webstorm

You will have to edit the 'File Watcher', there is Setting 'Arguments' this is what comes after the lessc command. Put somthing like this:

$FileName$ $FileNameWithoutExtension$.css

this should create your output file (.css) in the same directory.

Is it possible to setup the file watcher in LESS to have the output file with different name from the source?

Sure - just specify theme.css as a target file name:

---

Related Topics