webstorm 中 LESS 自动编译为 CSS 的两种方法

跳转至HBuilder 中 LESS 自动编译为 CSS 的方法

方法一

此方法需安装 nodejs 环境，在官网进行下载 ---- nodejs下载

通过 npm 工具包安装 less，命令行 npm install less -g；通过命令 lessc 测试less是否安装成功

步入正题了，在 webstorm 中如何把 less 文件自动编译成 css 文件：
在 webstorm 中打开 "File" → "Settings" → "Tools" → "File Watchers" ，弹出配置窗口。点击右上角 "+"，选择 Less ，如下图：

配置 "Program" 选项，值为 lessc 的安装路径
less 自动编译 css 指定路径，对 "Arguments" 进行修改 ----
$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css，如下图2所示

保存配置后，新增修改任意less文件，可自动生成编辑一个css文件。如下图3所示，为最后编译的结果

方法二

此方法不需要用到npm包。

在 webstorm 中自行安装 Less 编译插件

1. 下载和安装 下载地址
   下载完成后，在 webstorm 中 "File" → "Settings" → "Plugins" 进入插件安装界面，通过 "Install plugin from disk…" 按钮，选择下载的安装包进行安装。
   
   安装完成后，重新启动 "WebStorm"。
2. 使用简介
   安装成功后，再次进入 "WebStorm" ，在 "File" → "Settings" → "Other Settings" 中可以看到新增了 "LESS Profiles" 设置界面。
   点击 "绿色+号" 新增一个 Less 配置，起名为 "branch"，然后点击 "OK" 按钮。
   进入 Less 编译插件的设置界面后，选择 Less 源文件所在路径和编译后 CSS 文件的存放路径，设置完成后点击 "OK" 按钮保存设置。
   
   这样设置完成后，我们对 less 目录下的 "style.less" 文件进行修改并保存，提示 CSS 编译成功，然后在 css 目录中，就会生成一个对应的 css 文件 "styles.css"。