webstorm配置less，完整的目录树效果

1. npm下载less

在webstorm的终端输入以下的命令：npm install -g less

下载完成后，记录下载位置，我的下载位置是在：

C:\Users\用户名\AppData\Roaming\npm\node_modules\less

可以按照上述路径找到less的位置，我是通过npm找到的less的位置，上述路径换掉用户名应该就能找到

2. webstorm配置less

• 打开webstorm设置——工具——File Watcher，点击“ + ” ，选择Less模板
  

效果1：最基本的配置，满足使用

• 如图所示，右侧的文件
  
• 找到lessc.cmd，点击确定
  
• 此时点击确定即可完成less最基本的配置（此处我也有个不太懂的地方，上面选择了lessc.cmd,但是下面也只显示lessc，但实际上还是要选择lessc.cmd）
  

实际效果

按照上述步骤，在.less输入代码，会实时编译为.css（如果没有生成.css文件,那就等待一会，有时候生成挺慢的）。而.css以及生成的.css.map和.less是在同一目录下的

---

效果2：less文件和css文件分成两个目录生成

• 程序依旧找到并选择lessc.cmd
• 修改实参和要刷新的输出路径里面的内容
• 不懂得中间步骤的请查看文章上面的最基本的配置，满足使用
  

实参

$FileName$ $FileParentDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css --source-map

要刷新的输出路径

$FileParentDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css $FileParentDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css.map

实际效果

实现这个效果必须要先新建一个less目录，然后在这个less目录里面新建.less文件，webstorm会自动在同级目录下，生成css目录，以及相应的.css文件（如果没有生成.css文件,那就等待一会，有时候生成挺慢的）

---

效果3：实现完整的目录树

• 程序依旧找到并选择lessc.cmd
• 修改实参和要刷新的输出路径里面的内容
• 不懂得中间步骤的请查看文章上面的最基本的配置，满足使用
  

实参

$FileName$ $ProjectFileDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css --source-map

要刷新的输出路径

$ProjectFileDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css $ProjectFileDir$\css\$FileDirPathFromParent(less)$\$FileNameWithoutExtension$.css.map

实际效果

实现这个效果只能在项目的根目录下新建less目录，然后在less目录里面，无论你怎么新建目录，webstorm都能按照less的目录树，新建相同的css目录树（如果没有生成.css文件,那就等待一会，有时候生成挺慢的）

---

自定义效果

其实还能实现更多效果，可以点击右侧“ + ” ，然后跟看文档一样，选择相应的参数。