webstoem自动编译less文件

Posted 2020-08-14 &奋斗小青年

1. 去node的主页下载对应版本的nodejs然后安装下载地址：http://nodejs.org/   根据自己的系统选择合适的版本下载。
2. 安装完成之后打开命令提示符（win+r 输入cmd 回车）,分别输入node -v以及npm -v如果返回版本号说明你安装成功了
3. 
4. 接下来就可以安装less了，在“命令提示符”下运行命令“npm install less -g”，然后npm就自动开始下载并安装LESS。
5. 
6. 　　配置webstorm（版本10），点击“文件”> "设置"(Ctrl+Alt+S) 弹出设置界面，在左侧导航找到“工具(tool)">"file Watchers" 点击“+”号按钮找到less文件选项点击添加。
7. 
8. 配置参数
9. 1. Arguments : --no-color --source-map=$FileNameWithoutExtension$.css.map $FileName$   
   2. Output paths to refresh : $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
   3. 配置完参数后,写完less代码后,会直接在less文件的目录下生成一个.css文件和一个.css.map文件
   4. .css.map文件的作用是可以直观的在浏览器调试界面看到的是less文件的第几行
      1. 因为你是用less写的样式，less会编译成css显示在页面上。
      2. 但有个麻烦，浏览器里看的都是css第几排，而你编辑的又是less文件，很难对上。
      3. 这个时候有了source map，浏览器里直接显示less，非常方便。

 

1.