webstorm配置less解析的方法及注意事项
一、准备
1.1 node.js 安装包 去往腾讯微云下载
1.2 npm(lessc.cmd) 去往腾讯微云下载
1) 安装js解析器node.js。直接下一步就ok了。
2) 将npm压缩包解压,找到里面的lessc.cmd文件,放到c盘下一个没有中文路径的目录下,我们假如是 C:\xampp\htdocs\tools\npm
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510212800015-1138982415.png)
3)
3.1 打开webstorm→file→settings→Tools→file watching
点击“+”→less文件→Program右侧点击“。。。”弹出对话框,选择我们之前的文件,然后确定。
确定。
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213911780-1744762830.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213918155-837710404.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213923952-1369097921.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213929499-1805868560.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213934984-393842903.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213943343-1789390907.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213948359-763668832.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510213953437-47194984.png)
三、使用
新建haley.less文件,在html中进行引用
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214908937-138778783.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214916624-1215877827.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214921905-1063898445.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214927624-454405248.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214932499-1940195933.png)
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510214504280-942429046.png)
四、问题解决
出现如下乱码提示问题
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510215415952-745390006.png)
出现如下乱码提示问题
![](https://images2015.cnblogs.com/blog/928238/201605/928238-20160510215415952-745390006.png)
说明node.js未能成功安装,或者安装有问题
解决办法:重新安装node.js,然后重新启动电脑
其他问题:17年2月13日 升级6.9node后无法编译less(提示一堆英文,忘记截图了),只好退回到v4.1.0后,可以编译。(退回方法:卸载重装。)
haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!