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
– M8R-1jmw5r, Commented Apr 12, 2013 at 0: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
– LazyOne, Commented Apr 12, 2013 at 1:05
@aaronp: youtube.com/watch?v=TtdIm1EKLBk I think it was, looking for the blog-post now. — M8R-1jmw5r
– M8R-1jmw5r, Commented Apr 12, 2013 at 1:08

Community · Accepted Answer · 2017-05-23 12:34:15Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 12, 2013 at 7:02

CrazyCoder

405k183 gold badges1k silver badges945 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spetsnaz Over a year ago

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

smiletrl · Accepted Answer · 2014-07-23 02:43:38Z

10

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

answered Jul 23, 2014 at 2:43

smiletrl

3965 silver badges15 bronze badges

2 Comments

Anders Östman Over a year ago

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.

johnsnails Over a year ago

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

Damodar Bashyal · Accepted Answer · 2019-05-23 03:57:51Z

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, 2019 at 3:57

Damodar Bashyal

9513 gold badges17 silver badges31 bronze badges

answered Sep 27, 2014 at 10:45

Andrew Bogdanov

6381 gold badge8 silver badges16 bronze badges

4 Comments

Ryre Over a year ago

I found this to be the simplest solution.

johnsnails Over a year ago

My first thoughts were to do this but it didn't work for me.

Andrew Bogdanov Over a year ago

What exactly doesn't work out for you? You don't see a file being created?

Andrew Bogdanov Over a year ago

@Radmation reverse slashes in path

ketan · Accepted Answer · 2015-12-14 09:18:35Z

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, 2015 at 9:18

ketan

19.4k42 gold badges68 silver badges107 bronze badges

answered Dec 14, 2015 at 9:09

Peterjoee Raj

1

Comments

Japheth Obala · Accepted Answer · 2018-02-05 11:16:09Z

0

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

answered Feb 5, 2018 at 11:16

Japheth Obala

364 bronze badges

Comments

Jayx · Accepted Answer · 2013-04-12 07:31:41Z

-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, 2013 at 7:31

Jayx

3,9663 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

1 Comment

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related