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

【问题标题】：PHPStorm: How do I setup LESS to output to CSS directory with file watcher?PHPStorm：如何设置 LESS 以使用文件观察器输出到 CSS 目录？
【发布时间】：2013-04-04 08:35:39
【问题描述】：

如何使用 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 宏，我可以获取到当前目录的路径，但是没有明确的方法可以将路径中的 /less 替换为 /css。

【问题讨论】：

IIRC 这在该功能的演示视频中有概述。你知道我指的是哪个视频吗？
不，我不知道。可以给个链接吗？
../css/filename.css -- 将上一级，然后进入css 文件夹（相对于当前文件）。对于更深的位置（css/dir/file.less），我认为您将不得不使用具有不同范围的单独文件观察程序（“设置|范围”）。如果这不起作用，那么最好坚持使用更简单的文件夹结构。
@aaronp: youtube.com/watch?v=TtdIm1EKLBk 我想是的，现在正在寻找博文。
@M8R-1jmw5r，其实可以，看我的回答。

标签： css less phpstorm

【解决方案1】：

见my related answer for JADE file watcher，我相信LESS也是一样。

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

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

【讨论】：

设置输出路径以将值刷新为 '$ProjectFileDir$\www\catalog\view\theme\mytheme\js' 在 Windows 环境中为我工作。〜作为我自己未来的参考

【解决方案2】：

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

【讨论】：

【解决方案3】：

我想少编译一个文件

sites/all/themes/bic/res/less/style.less 到网站/所有/主题/bic/res/css/style.css

这就是我所做的

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

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

我可能会错过一些东西。无论如何，我都尝试了“--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"。它们都不适合我。因此，只需在此处发布我的解决方案，这可能会帮助一些与我有同样问题的人..

【讨论】：

值得一提的是，当给出“刷新的输出路径”并选中“从标准输出创建输出文件”时，我遇到了问题...当我取消选中“从标准输出创建输出文件”时，一切正常很好。
我几乎做了同样的事情。不确定它是否值得注意，但我的论点中有一个额外的冒号。 --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css

【解决方案4】：

只需将 Output Path to Refresh 更改为：

../css/$FileNameWithoutExtension$.css

更新：

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

..\css\$FileNameWithoutExtension$.css

【讨论】：

我发现这是最简单的解决方案。
我的第一个想法是这样做，但它对我不起作用。
究竟有什么不适合您？您没有看到正在创建的文件？
@Radmation 路径中的反斜杠

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

这就是我所做的。

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

您可以修改它以使用 LESS

【讨论】：