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

Question

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

or

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

IIRC this was outlined in the demo video of the feature. Do you know which video I mean? — M8R-1jmw5r, Apr 12 '13 at 00:52
`../css/filename.css` -- will go one level up and then in `css` folder (relative to the **current** file). For deeper location (`css/dir/file.less`) I think you will have to use separate file watcher with different scope ("Settings | Scopes"). If that will not work, then better stick with simpler folder structure. — LazyOne, Apr 12 '13 at 01:05
@aaronp: http://www.youtube.com/watch?v=TtdIm1EKLBk I think it was, looking for the blog-post now. — M8R-1jmw5r, Apr 12 '13 at 01:08
I don't find the original announcement any longer, the blog has been re-arranged, let me know if the video does not help. — M8R-1jmw5r, Apr 12 '13 at 01:14
@M8R-1jmw5r the video only shows how to output in the same path. ie. /css/myfile.less outputs to /css/myfile.css. — aaronp, Apr 12 '13 at 01:18
@LazyOne I've taken a look at scopes, but I'm not sure how they help accomplish this. Basically I need the file path, and need to replace "less" with "css" in it. — aaronp, Apr 12 '13 at 01:18
Well, the Macros are not that flexible in PHPStorm. You can not provide parameters and say which directory ranges from the path you want to retain and which ones to replace. Maybe you're lucky and you can fill the gap by combining two macros. — M8R-1jmw5r, Apr 12 '13 at 01:26
@CrazyCoder: Yes I've looked, especially at the link. Thanks for the hint, I did not know that some of these have parameters. — M8R-1jmw5r, Apr 12 '13 at 09:42

score 43 · Accepted Answer · edited May 23 '17 at 12:34

43

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.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 12 '13 at 07:02

CrazyCoder

389,263
172
990
904

Setting output paths to refresh value to '$ProjectFileDir$\www\catalog\view\theme\mytheme\js' worked for me on Windows env. ~ as a future reference for myself – spetsnaz Feb 25 '17 at 00:47

score 9 · Answer 2 · answered Jul 23 '14 at 02:43

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

Worth mentioning is that I got problems when an "Output path to refresh" was given and "Create output file from stdout" was checked... When I unchecked "Create output file from stdout" everything worked fine. — Anders Östman, Feb 25 '15 at 12:42
I pretty much did the same thing. Not sure if it is noteworthy or not, but I had an extra colon in my arguments. `--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css` — johnsnails, Feb 13 '16 at 23:02

score 5 · Answer 3 · edited May 23 '19 at 03:57

5

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

edited May 23 '19 at 03:57

Damodar Bashyal

931
3
17
31

answered Sep 27 '14 at 10:45

Andrew Bogdanov

629
1
8
16

1

I found this to be the simplest solution. – Ryre Apr 28 '15 at 21:12
4

My first thoughts were to do this but it didn't work for me. – johnsnails Feb 13 '16 at 12:22
What exactly doesn't work out for you? You don't see a file being created? – Andrew Bogdanov Feb 25 '17 at 05:15
@Radmation reverse slashes in path – Andrew Bogdanov Mar 30 '18 at 11:57

score 0 · Answer 4 · edited Dec 14 '15 at 09:18

0

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.

edited Dec 14 '15 at 09:18

ketan

19,129
42
60
98

answered Dec 14 '15 at 09:09

Peterjoee Raj

1

score 0 · Answer 5 · answered Feb 05 '18 at 11:16

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

score -2 · Answer 6 · answered Apr 12 '13 at 07:31

-2

You may want to try SimpLESS as a watcher for checking/compiling LESS to CSS on the fly - free to use on all platforms.

answered Apr 12 '13 at 07:31

Jayx

3,896
3
27
37

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

6 Answers6

Linked