综述
PhpStorm 可以使用 File Watchers 自动编译 Less，有了这个 IDE，妈妈再也不用担心我的 Less 编译了。下面说一下我的配置过程。 下面的例子以 Mac OS X 为例。
配置
1.配置 npm
1 |
brew install npm |
更多平台安装方式 npm
2.安装 lessc
1 |
npm install less -g |
安装完毕后查看安装路径
1 |
which lessc |
Mac OS X 的结果是
1 |
/usr/local/bin/lessc |
3.配置 PhpStorm
打开 PhpStorm，Preferences->Tools->File Watchers 点击加号新增 Less Template，然后点击编辑按钮编辑，页面如下 
其中需要配置两个地方
Program：
配置为 lessc 的路径，这边配置为 /usr/local/bin/lessc
Output paths to refresh：
1 |
$FileParentDir(less)$/css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css |
在这里简单解释下这个路径的意思。
例如项目名为 project，less 文件我们放置在 project/public/less/manage/style.less $FileParentDir(less)$ 是获取 less 目录的路径，也就是 project/public $FileDirPathFromParent(less)$ 是获取 less 文件到 less 目录的路径，也就是 manage $FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字，也就是 style 经过如上拼接，生成的内容为 project/public/css/manage/style.css
所以，不论我们的 less 文件如何放置，都可以生成相对路径的 css 文件。 配置完成之后，我们新建 less 目录，任意编辑一个 less 文件，都会在 css 目录下生成相应的文件。
简单配置
当然，如果你的 less 文件就直接在 less 目录下，可以简单配置以上的 Output Path 如下 ../css/$FileNameWithoutExtension$.css 这也是一种比较常用的配置方法。 如果目录结构简单，可以采取以上方式。
