如何用webstorm把less文件生成css

安装nodejs

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

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

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

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

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

对头，推荐发布的时候编译成css，之前的项目用到了bootstrap的less，然后在用lessjs测试的时候在ie6、7、8下面速度极慢，因为需要import大量less。所以这东西还是在开发时候爽爽就行了，真发布还是得编译成css的

背景：在项目中使用了less，用的是vscode中esay less插件，但在每次保存less文件时，都会在对应的同级文件夹内生成一个css文件，如何避免这样的情况呢？
解决办法：在同级目录下的vscode文件夹（没有则新建一个）中创建 settingsjson 文件，在文件中写：

需要把importLoaders设置为2，也就是说：
{test: /less$/, loader: 'style!cssimportLoaders=2!autoprefixer!less'}
表明你在某个less文件中import进来的资源（其它的less文件）会被使用autoprefixer和less 这两个loader解析
如果按照你最开始的设置：
{test: /less$/, loader: 'style!cssimportLoaders=1!autoprefixer!less'}
表明你在某个less文件中import进来的资源（其它的less文件）只会被使用autoprefixer这一个loader解析，就会报错
webpack css loader中关于importLoaders的解释很不友好

---