安装lessc以及在webstrom 中编译.less文件并生成css和css.map文件

注意：

(如果使用nvm管理node的，如果在node根目录直接安装而没有package.json文件，会损坏npm，导致npm无法使用，故先npm init 建立package.json文件。o(╥﹏╥)o如果已经损坏，请卸载该版本node并重新安装。还有注意lessc.cmd位置，在C:\Users\Administrator\AppData\Roaming\nvm\v8.0.0\node_modules\.bin中)

 

1.先查看node.js和npm的版本，确认安装好，然后安装LESS包

 

2.然后进入node的根目录，安装less包（npm install -d 就是npm install --save-dev ，描述可参考npm install --save 和 npm install -d的区别）

npm install -d less

 

3.进入D:\nodejs\node_modules\，该目录下有两个目录，分别为less，npm，less里面包含.bin目录（该目录下有lessc编译器（lessc文件）），把D:\nodejs\node_modules\.bin添加到path环境变量中

这里可能会遇到的问题：win7设置环境变量需要重启生效问题

 

 

4.输入lessc -version ,测试安装成功

 

接下来是webstrom配置部分：

1.打开WebStrom，随便新建一个工程，在工程名上右键，【新建】-【Stylesheet】,输入文件名，Kind值选择Less File,【确定】，会自动提示是否将less加入watcher，点击【Add watcher】

 

2.如果没有提示，也可以通过【文件(File)】-【设置(Settings)】-【工具(Tools)】-【File Watchers】-【+】-【Less】打开New Watcher配置界面。注意：Program 值 需要填写lessc.cmd的所在位置

新版则如下图：

 

3.此时，如果直接点击【确定】，则当我们修改less文件时，会自动生成相应的css文件，当然我们为了让其功能更强大，生成压缩后的css和相应的map文件，就需要修改

Arguments和Output paths to refresh两个参数，按照下面的表中值进行配置，完成相应的功能。 

 

修改前

参数名	参数值(下面no之前是两个“-”)
Arguments	--no-color $FileName$
Output paths to refresh	$FileNameWithoutExtension$.css

修改后（不启用css压缩）

参数名	参数值(下面no和source之前是两个“-”)
Arguments	--no-color $FileName$ $FileNameWithoutExtension$.css –source-map=$FileNameWithoutExtension$.css.map
Output paths to refresh	留空

 

Arguments里还可添加其他参数实现更多的功能，点击后面的【Insert maro…】可以添加更多的宏值