投稿    登录
欢迎来访~

PhpStorm使用File Watchers自动编译less

Other 崔庆才 8821浏览 2评论

扫码或搜索:进击的Coder

发送

即可立即永久解锁本站全部文章

综述

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

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

配置

1.配置npm

更多平台安装方式

npm

2.安装lessc

安装完毕后查看安装路径

Mac OS X的结果是

3.配置PhpStorm

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

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

56926F1E-D626-4E66-925D-15971F993F30

其中需要配置两个地方

Program:

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

Output paths to refresh:

在这里简单解释下这个路径的意思。

例如项目名为 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

更多文章、联系博主、技术交流、商务合作

扫码或搜索:进击的Coder

进击的Coder

微信公众号 扫一扫关注

喜欢 (18)or分享 (0)

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请狠狠点击下面的

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址