关于webStorm设置less自动编译css和sourcemap问题

前两天项目页面迭代版本，接手同事的页面（据说是经了三人的手...），css中内容已经惨不忍睹，忍着痛苦算是完成了css效果。痛定思痛，以后写代码一定要用less，维护起来不会这么惨。问一个朋友，他是用考拉进行自动编译，本人比较懒，不想使用那么多工具，于是百度了一下关于webStorm的自动编译less文件，还真有，但是在less文件下创建的css和map，于是又查阅怎么能创建到根目录下的css文件夹中，经过个人测试修改，把webStorm配置记录一下，以备以后忘了。

1.设置Chrome浏览器的开发者模式，网上说是在Setting-General下，找了半天也没找到General这货（我严重怀疑自己电脑有问题，PS功能报错，Chrome也各种不好用），结果在F12-右上角-大概中间位置

2. npm install less -g 全局安装less。由于我是以前安装的，这次忽略了这个步骤，参考别的资料才发现有这么一步。

3. 配置 webStorm ：File-setting-Tools-File Watchers-右上角添加Less的设置。如图：

----

回弹出这个窗口，Program打开就是这个路径，我猜应该是自动匹配的到lessc命令，如果不是，那就手动配置一下吧；主要是Arguments和Output paths to refresh，

Arguments：--no-color --source-map=$FileParentDir$/css/$FileNameWithoutExtension$.css.map $FileName$

Output paths to refresh：$FileParentDir$\css\$FileNameWithoutExtension$.css: $FileParentDir$\css\$FileNameWithoutExtension$.css.map

保存，然后创建一个Less文件夹，写一个less文件，自动生成了css文件夹及对应css和map。

最后，复制要给别人的sass配置，等以后需要sass的时候再试试能用不~

sass的配置方法也是一样,它生成css和map的命令行参数如下：

sass
bootstrap.scss:../css/bootstrap.css --sourcemap --no-cache

在Arguments 中的参数如下

--no-cache
--sourcemap $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css