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

Question

如何使用PHPStorm中的文件监视器设置LESS文件监视器输出路径来执行此操作：

我想：

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

输出到：

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

或

/project/path/less/file2.less

输出到：

/project/path/css/file2.css

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

Answer 1

请参阅my related answer for JADE file watcher，我相信LESS也是如此。

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

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

Answer 2

我想从

编译一个较少的文件

sites / all / themes / bic / res / less / style.less to 站点/所有/主题/ BIC / RES / CSS / style.css中

这就是我做的事情

所以我使用的参数是： - no-color $ FileName $ ../ css / $ FileNameWithoutExtension $ .css

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

我可能会错过一些东西。无论如何，我试过了两个＆＃34; - 没有颜色$ FileName $ $ ProjectFileDir $ / sites / all / themes / bic / res / css / $ FileDirPathFromParent（less）$＆＃34;和＆＃34; - 无颜色$ FileName $ $ ProjectFileDir $ / sites / all / themes / bic / res / css / $ FileDirPathFromParent（less）$$ FileNameWithoutExtension $ .css＆＃34;。它们都不适合我。所以请在这里发布我的解决方案，这可能会帮助一些对我有同样麻烦的人..

Answer 3

只需将输出路径更改为更改为：

../css/$FileNameWithoutExtension$.css

<强>更新

在新版本的LESS中，您应该在指定的路径中反转斜杠。所以它应该是：

..\css\$FileNameWithoutExtension$.css

Answer 4

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

Answer 5

我有一个类似的问题，让scss文件观察器输出到css目录

这就是我所做的。

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

您可以修改此项以使用 LESS

Answer 6

您可能希望SimpLESS作为观察者在运行中检查/编译LESS到CSS - 可以在所有平台上免费使用。