综述

PhpStorm可以使用File Watchers自动编译Less，有了这个IDE，妈妈再也不用担心我的Less编译了。下面说一下我的配置过程。

下面的例子以 Mac OS X为例。

配置

1.配置npm

brew install npm

更多平台安装方式

npm

2.安装lessc

npm install less -g

安装完毕后查看安装路径

which lessc

Mac OS X的结果是

/usr/local/bin/lessc

3.配置PhpStorm

打开PhpStorm，Preferences->Tools->File Watchers

点击加号新增 Less Template，然后点击编辑按钮编辑，页面如下

其中需要配置两个地方

Program：

配置为lessc的路径，这边配置为 /usr/local/bin/lessc

Output paths to refresh：

$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

这也是一种比较常用的配置方法。

如果目录结构简单，可以采取以上方式。

转载请注明：静觅 » PhpStorm使用File Watchers自动编译less