投稿    登录
  博主录制的Python3爬虫视频教程已发布!详情请戳Python3爬虫视频教程!希望大家支持!非常感谢!

PhpStorm使用File Watchers自动编译less

Other 崔庆才 3233浏览 2评论

综述

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

喜欢 (9)or分享 (0)

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

想结交更多的朋友吗?

来进击的Coder瞧瞧吧

进击的Coder

QQ群号 99350970 立即加入

进击的Coder灌水太多?

这里是纯粹的技术领地

激进的Coder

QQ群号 627725766 立即加入

想找人聊天解闷?想要学习干货?

微信公众号进击的Coder为你打造

进击的Coder

微信公众号 扫一扫关注