Less Filewatcher compiler in PHPStorm

Question

what I'am doing wrong when trying to compile the .less files into .css with PHPStorm File watcher ?

Here is the screenshot, (pls open THIS LINK to see the full size of the image):

I installed npm install -g less, after getting installed NodeJS. It works fine the compiler lessc when using cmd.exe - Command Line Tool in Windows OS with this command:

lessc custom.less custom.css, but it wont do anything inside PHPStorm in Filewatcher.

Any clue what I should correct, pls ?

Answer 1

For those who want to configure LESS auto compiler inside their IDE PHPStorm, you can do it in that way:

1. Download and install Node.js
2. Open Terminal/Shell/Command line, cmd.exe for Windows Environment
3. Inside Command line terminal, type npm install -g less and wait for LESS to be downloaded and installed.
4. In PHPStorm open Settings window: File > Settings (CTRL+ALT+S)
5. Navigate to File Watchers (or search for it inside SETTINGS Window)
6. Click on + on the right side of the Settings dialog to create a new File Watcher and configure it as shown on picture:
   
   And this is how your folder structure should look like for the settings on the previous picture:
   
7. Save it and test it, each time you type something inside the .less file, it will be automatically compiled into .css you've defined before in File Watcher's setting dialog.
   To untouch the source less files, create a template.less like shown in picture and subload the source files there before doing styling anything.

/*!
 * Your commented code which wouldn't be removed in compiled .css because of "!" mark
 */
 /*
  * This comment will be removed in compiled .css file because of no "!" after "/*"
  */

// Core source files of Twitter's Bootstrap
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

// Core source file of Font Awesome Icons
@import "font-awesome/font-awesome";

// Connected plugins
@import "plugins/datepicker";
@import "plugins/redactor";

/*!
 * General template styles below
 */

/* -------------------------------------------------------------- */
/**** PRECONFIG, OVERRIDES, VARIABLES, TYPOGRAPHY ****/
/* -------------------------------------------------------------- */
// VARIABLES.LESS Override
//---------------------------------------------------------------
// Colors
@whiteSmoke:            #f5f5f5;

// Typo
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;