css - 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 替换 /less。

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

../css/$FileNameWithoutExtension$.css

更新：

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

..\css\$FileNameWithoutExtension$.css

Answer 4

为更少的编译器更改输出目录。
在 tat 中打开编辑观察器，您将看到在该输入框中刷新的输出路径更改如下../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 - 在所有平台上免费使用。