Reputation: 742

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

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

/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.

Upvotes: 22

Answers (6)

Andrew Bogdanov

Reputation: 638

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

Upvotes: 5

Japheth Obala

Reputation: 36

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

This is what I did.

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

You can modify this to work with LESS

Upvotes: 0

Peterjoee Raj

Reputation: 1

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.

Upvotes: 0

smiletrl

Reputation: 396

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

enter image description here

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..

Upvotes: 10