使用WebStorm集成开发环境Less解析安装与配置

By柏小白

使用WebStorm集成开发环境Less解析安装与配置

 

1.安Node.JS

由于Less是使用JS开发的,所以Less运行时依赖Node.JS,如果你电脑之前没有安装过Node.JS,还需下载安装Node.JS

柏小白-小白变大神

node.js官网 下载

安装过程都是一路下一步。安装完成后打开控制台输入node -v,如果能显示出版本号就说明,安装成功了。

2.替换淘宝镜像 CNPM

由于长城牌防火墙的原因,可能NPM(Node.js的包管理工具)无法访问到服务器,这时就可替换成淘宝的NPM镜像

打开控制台直接输入:
npm install -g cnpm –registry=https://registry.npm.taobao.org
MAC平台前面还需加一个sodo

3.安装Less

打开控制台直接输入:
cnpm install -g less
接着输入lessc -v能看到版本号就表示安装成功了

4.添加File Watchers

打开WebStorm,点击文件—>设置—>File Watchers—>右边的+

柏小白-小白变大神

Less配置

program:你Node安装路径下的lessc.cmd
arguments:–no-color –source-map=$FileNameWithoutExtension$.css.map $FileName$ 
working directory:$FileDir$
output paths to refresh:$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

之后你只要在项目中添加一个.less文件,系统就会自动为你编译了。

About the author

柏小白 administrator

Leave a Reply