PHPStorm：如何设置 LESS 以使用文件观察器输出到 CSS 目录？

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

提问by aaronp

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

如何在 PHPStorm 中使用 File Watchers 设置 LESS file watchers 输出路径来执行此操作：

I want:

我想要：

/project/path/less/dir/file.less

/project/path/less/dir/file.less

to output to:

输出到：

/project/path/css/dir/file.css

/project/path/css/dir/file.css

or

或者

/project/path/less/file2.less

/project/path/less/file2.less

to output to:

输出到：

/project/path/css/file2.css

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

我没有看到使用 PHPstorm 中的输出路径宏实现这一点的明确方法。使用 FileDirRelativeToProjectRoot 宏，我可以获得当前目录的路径，但没有明确的方法将路径中的 /less 替换为 /css。

回答by CrazyCoder

See my related answer for JADE file watcher, I believe it would be the same for LESS.

请参阅我对 JADE file watcher 的相关答案，我相信 LESS 也是如此。

The trick is to use $FileDirPathFromParent(dir)$macro:

诀窍是使用$FileDirPathFromParent(dir)$宏：

$ProjectFileDir$/css/$FileDirPathFromParent(less)$will produce /project/path/css/dir/for a file located in /project/path/less/dir/directory.

$ProjectFileDir$/css/$FileDirPathFromParent(less)$将生成/project/path/css/dir/位于/project/path/less/dir/目录中的文件。

回答by smiletrl

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

站点/所有/主题/bic/res/less/style.less 到站点/所有/主题/bic/res/css/style.css

Here's what I did

这是我所做的

So the Arguments I used is: --no-color $FileName$ ../css/$FileNameWithoutExtension$.css

所以我使用的参数是： --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.

这将在 phpstorm 控制台产生： /usr/local/bin/lessc --no-color blogs.less ../css/blogs.css ，并且工作正常。

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

我可能会错过一些东西。无论如何，我尝试了 "--no-color $FileName$ $ProjectFileDir$/sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$" 和 "--no-color $FileName$ $ProjectFileDir$ /sites/all/themes/bic/res/css/$FileDirPathFromParent(less)$$FileNameWithoutExtension$.css”。他们都不为我工作。所以就在这里发布我的解决方案，这可能会帮助一些和我有同样问题的人..

回答by Andrew Bogdanov

Just change Output Path to Refreshto:

只需将输出路径更改为刷新即可：

../css/$FileNameWithoutExtension$.css

../css/$FileNameWithoutExtension$.css

Update:

更新：

In the new version of LESS you should reverse your slashes in Path you specify. So it should be:

在新版本的 LESS 中，您应该在指定的 Path 中反转斜线。所以应该是：

..\css\$FileNameWithoutExtension$.css

..\css\$FileNameWithoutExtension$.css

回答by Peterjoee Raj

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 .cssto this path.

更改较少编译器的输出目录。
在 tat 中打开编辑观察器，您将看到在该输入框中刷新的输出路径如下所示../yourfolderpath/$FileNameWithoutExtension$.css。现在您可以看到更少的编译.css到此路径。

回答by Japheth Obala

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

我在让 scss 文件观察器输出到 css 目录时遇到了类似的问题

This is what I did.

这就是我所做的。

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

1. 在参数中， --no-cache --update $ProjectFileDir$/css/style.css
2. 在要刷新的输出路径中， $ProjectFileDir$/css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css

You can modify this to work with LESS

您可以修改它以使用 LESS

回答by Jayx

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

您可能想尝试将SimpLESS作为观察者来动态检查/编译 LESS 到 CSS - 在所有平台上免费使用。