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

Tags: css,less,phpstorm

Problem :

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

I want:


to output to:




to output to:


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.

Solution :

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.

    CSS Howto..

    How to Prevent An Inline Embed From Pushing Text Down (CSS)

    How to style object when the user clicks it

    How can I use CSS to center text in DIV

    How to pause css animation at orginal state

    How to get rid of the spaces between CSS nav element borders?

    Bootstrap 3 - How to maximize input width inside navbar

    How do I assign styling to a Javascript variable?

    How to crop/cut off an image so it fits the height of the browser window?

    how to trigger a stored property with css color change?

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    Understanding how menus work in html5 and css3

    How to style author id in WordPress?

    How can
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How can I add fixed background just to this section? [demo included]

    How do you properly apply hover css to
  • elements with list-style-type: none?
  • How to fit a div container to cover all the remaining space in between?

    How to use javascript to transition a property from a set attribute to a new attribute

    how to I make my responsive website look normal on galaxy s4 (media query)

    How to select element, enclose it in a div and add a class to it, in pure javascript?

    How to align multiple columns in bootstrap 3 carousel?

    How to dynamically reload a .css?

    How to use a CSS for only one div and not the rest of the code?

    How to make CSS visible only for Opera

    How to add CSS to all tds of a particular tr in jQuery?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How do I execute a javascript after Ajax load?

    How to position a div differently for a specific page?

    CSS: How do I shrink a div to beyond a font's invisible padding?

    Any idea how to do this in css?

    how to change CSS priority (don't use !important)