PHPStorm中较少的Filewatcher编译器

Question

尝试使用 PHPStorm文件观察程序将.less文件编译为.css时，我做错了什么？

以下是截图，（请打开THIS LINK查看图片的完整尺寸）：

我在安装npm install -g less后安装了NodeJS。使用lessc - Windows操作系统中的命令行工具时，使用此命令可以很好地使用编译器cmd.exe：

lessc custom.less custom.css，但它不会在Filewatcher中的PHPStorm中做任何事情。

我应该纠正什么，请问？

Answer 1

对于那些想在IDE PHPStorm中配置LESS自动编译器的人，你可以这样做：

1. 下载并安装Node.js
2. 打开终端/ Shell /命令行，Windows环境为cmd.exe
3. 在命令行终端内，键入npm install -g less并等待下载并安装LESS。
4. 在PHPStorm中打开“设置”窗口：文件＆gt;设置（CTRL + ALT + S）
5. 导航至文件监视器（或在“设置窗口”中搜索）
6. 单击“设置”对话框右侧的 + 以创建新的文件监视器，并按照图片所示进行配置：
   
   这就是你的文件夹结构在上一张图片上的设置的样子：
   
7. 保存并测试它，每次在.less文件中输入内容时，它将自动编译到您之前在File Watcher的设置对话框中定义的.css。
   要解开源较少的文件，请创建一个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;