如何在 webstorm 中配置 less

什么是 less

  less 是一种动态样式语言，属于 css 预处理语言的一种。它使用类似 css 的语法为 css 的赋予了动态的特性，如变量、继承、运算、函数等，更方便 css 的编写和维护实现 css 模块化。less 可以在多种语言，环境中使用，包括浏览器端、桌面客户端、服务端。
  通过 css 预处理技术可以很好的提升 css 的编程性，提高 css 代码的开发效率和可维护性，目前比较热门的相关技术有 Sass、Less CSS、Stylus、Compass 等

less 官方文档（中文版）：https://less.bootcss.com/#%E6%A6%82%E8%A7%88

1.安装 less

在服务器端安装 less 的最简单方式就是通过 npm（node 的包管理器），所以要先下载 node.js
下载地址：https://nodejs.org/en/

安装 Node.js 的时候会自动安装 npm

然后，安装 lessc 模块

打开 cmd 控制台

输入下面一行 npm 命令，安装 less 模块：-g 是全局安装，如果不加会安装在当前目录。

		npm install less -g

2. 在 webstorm 中设置 less

打开 webstorm ，找到 File -> Settings -> Tools -> File Watchers
添加一个 less 选项

PhpStorm：会自动识别 lessc.cmd 文件，如果不能识别，手动找到 npm 目录的 lessc.cmd 文件即可
Arguments：选择之前记录的那个目录下 lessc 文件所在的路径， 后面加 $FileName​$
Working directory：不用改，默认就好
Output paths to refresh：就是指编译后 css 的存放路径，设置编译后的 css 文件存放的路径以及取什么名字以及后缀。默认就好

这样在项目里编辑 less 文件时，就会自动实时生成 css 文件了

效果如下：

---

转自“未来可期”的博客园博文