本文介绍了如何在WebStorm中设置LESS自动编译为CSS，并生成源地图，以便于代码维护。首先，需要开启Chrome浏览器的开发者模式，然后全局安装LESS。接着，在WebStorm的File Watchers中配置LESS编译，指定编译参数和输出路径。通过这种方式，LESS文件会自动编译到根目录的css文件夹中，同时生成对应的CSS和源地图文件。
前两天项目页面迭代版本，接手同事的页面（据说是经了三人的手...），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 W
最低0.47元/天 解锁文章
扫一扫
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
