phpstorm怎么让less自动生成css

配置PhpStorm
在PhpStorm中新建一个LESS文件，PhpStorm将提示你添加FileWatcher，或者通过Settings->Tools->File Watcher进入File Watcher界面添加一个LESS的File Watcher
添加界面如下：
我们主要修改的是Arguments和Output paths to refresh。
Arguments: --no-color --source-map=/css/$FileNameWithoutExtension$cssmap $FileName$
Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$css: $FileParentDir$/css/$FileNameWithoutExtension$cssmap
最终生成的目录结构：
好了，经过这样的设置就能使用PhpStorm自动编译LESS了。

第一，在扩展包搜索 less ,找到 easy less

第二，安装完记得重启

第三，ctrl+, 快捷键打开设置，也可以在 文件 > 首选项 > 设置

第四，搜 lesscomplie ，点击less,拉倒最底下，找到 settingjson

第五，在json配置中加入，lesscompile(less配置)

安装nodejs, >

打开CMD命令行工具, windows+R ==> 输入   cmd   回车

输入代码:   npm install -g less     回车执行, 就会安装less工具

打开webStorm, File-->Settings-->Tools-->File Watchers

右边有一列, 找到一个"+"号的图标, 点击, 选中里面的"less", 看看是不是和下图一样, 不同版本的WebStorm可能会有区别, 这个是WebStorm 20161的版本截图

点击"OK", 应该就可以了

安装nodejs

打开CMD命令行工具, windows+R ==> 输入   cmd   回车

输入代码:   npm install -g less     回车执行, 就会安装less工具

打开webStorm, File-->Settings-->Tools-->File Watchers

右边有一列, 找到一个"+"号的图标, 点击, 选中里面的"less", 看看是不是和下图一样, 不同版本的WebStorm可能会有区别, 这个是WebStorm 20161的版本截图

点击"OK", 应该就可以了。

---