webstorm less Filewatcher

环境:mac电脑,webstrom安装完成;window应该大同小异(我没测试过)

1,下载nodejs,并且安装

2,安装less(任意目录) 记下安装的目录,如下/user/local/lib/node_modules/less

npm install less -g(非root用户记得用sudo)

webstorm less Filewatcher_第1张图片


3,在webstorm里面配置less.

打 preferences  webstorm less Filewatcher_第2张图片


配置说明:

Program: 这里面是node的安装目录(不清楚用which node查询)

Arguments: 2中记录下的目录,后面添加$FileName$

Working directory:保持默认不变即可

Enviroment variales:缺省即可

Output pats to refresh :是编译less文件后对应css文件的位置

例如我的所有less文件最后都会编译到一个style.css文件中,而这个sytle.css文件的目录(项目工程)是

/Users/haiming/GobiBuildProject/tshbao/web/site-v2/front/resources/css/style.css

将其放入其中即可

配置完成,webstrom会自动帮我们编译less文件

show console是打印编译时候的日志,改成error,这样只有在error时候才会打印日志



我们也可以通过命令行来编译

在less项目目录下执行,如下图:



webstorm less Filewatcher_第3张图片





你可能感兴趣的:(IT环境)