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