webStrom配置less编译,很方便```

------ 每次写项目都觉得内部配置less比gulp方便些,配置和大家分享一下 ------

1、首先一定要安装并配置好 nodejs,下载地址:http://nodejs.org/ ;

2、之后打开命令提示符(win+R),node -v & npm -v 返回版本号就说明安装成功;

3、安装less,命令提示符然后npm install less -g 回车下载安装,安装会提示安装路径,记下该路径一会儿要用;

     默认:C:\Users\Administrator\AppData\Roaming\npm\node_modules\less\bin\lessc

webStrom配置less编译,很方便```_第1张图片

4、接下来配置webStrom的less设置File -> Settings -> External Tools,点击左上角绿色的‘+’,如图

webStrom配置less编译,很方便```_第2张图片

Program :是“node.exe”的实际路径。我的 -- D:\nodejs\node.exe

Parameters :是less的安装目录。我的 --

C:\Users\Adminis***\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ 

Working directory :是nodejs的安装目录。我的 -- D:\Program Files\nodejs

轻轻点击OK;

5、新建一个index.less,在初次打开less文件的时候,在编辑界面的右上方会出现一个“Add watcher”链接,点进去,确定。

有的小可爱会存在需要手动设置 File -> Settings -> File Watchers 里面 Program 的问题,如图:

webStrom配置less编译,很方便```_第3张图片

Arguments : 我的 -- $FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --source-map ;

Output paths to refresh : 我的 -- $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map ;

然后以上就配置好啦~ 如果不起作用就重启webstrom试试哦~

6、实例:

我的index.css下面还有一个.map文件,这个不影响效果,如果不想要的话 --:

Arguments下删除 --source-map

Output paths to refresh下删除 :$FileNameWithoutExtension$.css.map ;

webStrom配置less编译,很方便```_第4张图片

(关于 $***$设置 不理解可以问问度娘哦嘻嘻嘻,byebye```)




你可能感兴趣的:(webStrom配置less编译,很方便```)