PHPStorm 中的 Less 文件监视器编译器

Question

PHPStorm 中的 Less 文件监视器编译器

lessphpstorm

14

使用PHPStorm文件监视器编译.less文件为.css时，我做错了什么？

这是截图，（请打开此链接查看完整图片）：

在安装了NodeJS之后，我执行了npm install -g less。当我在Windows操作系统中使用cmd.exe命令行工具运行以下命令时，编译器lessc可以正常工作：

lessc custom.less custom.css，但在PHPStorm的Filewatcher中不起作用。

有什么提示，请问我需要纠正什么吗？

- aspirinemaga

1

嗯...你做错了。为什么在命令行中执行lessc命令时要指向node.exe？node.exe只是一个nodejs解释器。如果你试图执行两个不同的命令，为什么期望看到相同的结果呢？答案：你应该将文件监视器指向lessc.cmd（提供完整路径--它在你的C:\Users\USERNAME\AppData\Roaming\npm文件夹中）。 - LazyOne

@LazyOne - 这是PHPStorm提供的默认设置，实际上我已经找到解决方法了，通过修改Argument框中的代码为C:\Users\%USER%\AppData\Roaming\npm\node_modules\less\bin\lessc $FileName$ -yui-compress。 - aspirinemaga

这是我第一次看到它建议使用 node.exe -- 它不应该这样做（除非你之前尝试过其他东西，例如 nodejs 支持，并且它以某种方式进入了文件监视器）。无论如何：http://devnet.jetbrains.com/message/5481646#5481646 -- lessc 可执行文件的正确路径是 C:\Users\USERNAME\AppData\Roaming\npm\lessc.cmd。 - LazyOne

是的，那是我第一次看到的，但在 PhpStorm 6.0.3 上它不起作用。所以我就像WTF一样，它显示一个错误，只有win32可接受的文件类型才能作为可执行文件，而不是像.bat，.cmd等shell文件... 我很困惑为什么它没有像推荐的那样工作，但就我所做的来看，它完美无缺。 - aspirinemaga

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aspirinemaga · Accepted Answer

对于那些希望在他们的 PHPStorm IDE 中配置 LESS 自动编译器的人，可以按以下方法操作：

下载并安装Node.js
打开终端/Shell/命令行（Windows 环境下使用 cmd.exe）
在命令行终端中，键入npm install -g less 并等待 LESS 下载和安装。
在 PHPStorm 中打开“设置”窗口: 文件 > 设置 (CTRL+ALT+S)
导航到 文件监视器（或在 SETTING 窗口中搜索它）
单击设置对话框右侧的 + 以创建一个新的文件监视器，并按照图片所示进行配置：

这是设置前一张图片的文件夹结构应该是这样的：
保存并测试，每次您在 .less 文件中输入内容时，它都会自动编译为 File Watcher 的设置对话框中定义的 .css。
要保持源 less 文件的原样，请创建一个类似图片所示的 template.less 文件，并在进行任何样式设置之前从那里加载源文件。

/*!
 * Your commented code which wouldn't be removed in compiled .css because of "!" mark
 */
 /*
  * This comment will be removed in compiled .css file because of no "!" after "/*"
  */

// Core source files of Twitter's Bootstrap
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

// Core source file of Font Awesome Icons
@import "font-awesome/font-awesome";

// Connected plugins
@import "plugins/datepicker";
@import "plugins/redactor";

/*!
 * General template styles below
 */

/* -------------------------------------------------------------- */
/**** PRECONFIG, OVERRIDES, VARIABLES, TYPOGRAPHY ****/
/* -------------------------------------------------------------- */
// VARIABLES.LESS Override
//---------------------------------------------------------------
// Colors
@whiteSmoke:            #f5f5f5;

// Typo
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;