在PhpStorm中使用Less编译器，将Less代码转换为CSS

1、使用NPM来安装Less编译器，查看NPM版本，如图1
npm -V

图1

2、全局安装Less编译器，在PhpStorm中运行NPM，选择File，打开Settings，如图2

图2

3、在“语言和框架”下单击Node.js和NPM，在打开的Node.js和NPM页面上，Packages区域显示当前在您的计算机上安装的所有Node.js相关软件包，无论是在全局还是在项目级别。less已安装，如图3

图3

4、创建一个文件观察者，选择File，打开Settings，如图2

图2

5、单击“工具”节点下的“文件观察者”。打开的File Watchers页面显示项目中已经配置的File Watcher列表。如图4

图4

6、重复第3步骤，发现less的安装在项目级别，非全局安装，如图5

图5

7、在全局模式下从命令行运行安装，在命令提示符下键入以下命令，使用淘宝 NPM 镜像，如图6

cnpm install -g less

图6

8、将这个文件夹：C:/Users/Administrator/AppData/Roaming/npm/node_modules/less 添加到PATH变量中，如图7

图7

9、重复第5步骤，指定程序文件夹：C:/Users/Administrator/AppData/Roaming/npm/lessc.cmd，如图8

图8

10、新建一个style.less文件，新增一些内容，自动编译生成style.css文件，如图9

图9