PHPstorm Less Watcher Configuration

Less Filewatcher compiler in PHPStorm

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;

PhpStorm LESS Watcher configuration

1. You need to enable Track only root files option so that only main file will be compiled.

   If it does not work -- delete your existing watcher and create new one from scratch. Here is mine (as an example -- works fine for me).

   

2. For automatic upload (deployment) -- have a look at the official manual: https://confluence.jetbrains.com/display/PhpStorm/Deployments+in+PhpStorm

   If configured correctly but it still does not work -- it's possible (quite likely) that your Output paths to refresh is not pointing to a correct file (after File Watcher execution IDE does not re-read whole project looking for changes -- only files pointed here).

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.

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)

Less File Watcher creates empty files in PhpStorm

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

Setting up a LESS file watcher in PHPStorm 6 using node.js on Windows?

That error tells us that PHPStorm is calling CreateProcess, which can only start executables. It cannot run scripts/batch files, which is what lessc is. (PHPStorm would have to use ShellExecute for that.)

To work around this limitation, you'll have to specify the Node installation (C:\Program Files\nodejs\node.exe most likely) as the executable, and the arguments should probably be something like C:\Users\Jason\AppData\Roaming\npm\node_modules\less\bin\lessc $FileName$

PhpStorm: SCSS File Watcher - how to disable source maps?

if you've followed jetbrain's tutorial on how to work with sass/scss,
you probably installed ruby-sass (there's also node-sass).
any way phpstorm lets you define arguments when you setup a new watcher (settings->tools->file-watchers).

add the --no-source-map flag and it'll prevent sourcemap generation.

Less file watcher in PhpStorm produces: lessc: ENOENT: no such file or directory

Using the less compiler directly in the project folder via the command -- line works perfectly (e.g. $ lessc styles.less styles.css)

Try doing the same then -- please try with $FileDir$ in the "Working Directory" field.

---

Related Topics