在WebStorm里配置watcher实现编辑less文件时自动生成.css文件

前言

使用cnpm下载的less 如何在webstorm里配置

开始动手

1.操作前确定成功安装less。

1)去官网下载node.js, 并安装

2) node -v npm -v 查看node,npm是否安装成功

如果进任意目录都显示版本 说明是全局安装； （如果需要全局环境，而又没有全局安装，则需要配置环境变量）

3)使用淘宝镜像安装cnpm

4)cmd 进入到 打算放模块的路劲 ，cnpm install less

在这个路劲的文件夹里可以看到modules文件夹了





2.webstorm里的设置

1.打开WebStrom，随便新建一个Less File,会自动提示是否将less加入watcher，点击【Add watcher】,

注意 这里的lessc.cmd是在.bin里面 。并不在less文件夹下

从网上的资料看，用npm安装的less,lessc.cmd在npm文件夹下。所以如果找不到lessc.cmd路径的话就 用电脑文件名搜索的功能搜索一下吧~





保存之后，实时编译less,就会出来css文件；

（我在配置的时候出了两个问题：

1.糊糊涂涂的装了less,然后找不到路劲。

2.一直以为lessc.cmd在less文件夹下，所以悲剧了

）记录一下，以免以后用起来又重复错误