webstorm自动编译less文件的设置方法

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。


在用webstorm的时候,想自动将less文件编译成css文件,设置方法如下:

1、安装node.js环境。

– Node.js中文官网:www.nodejs.org/zh-cn

– 如果官网打不开,可以到这里下载:www.nodejs.cn

安装过程比较简单,一路next就ok了。注意不要安装在中文目录下。

2、按住 windows+r 键,输入 powershellcmd 命令,打开控制台。输入npm install -g less 命令来安装less文件编译模块。

由于国内网络线路原因,安装可能较慢或失败,耐心点多试几次。

3、在webstorm菜单栏中依次选择 File->Setting 打开设置窗口。

4、找到 Tools->File Watchers,点击右上角 加号 图标,选择 Less

 

5、打开的窗口中,里面的参数默认就好,不需要手动修改

6、然后点击OK OK 将设置保存即可(最好重启下webstorm)。

PS:本方法同样适用于phpstorm设置less自动编译。


如果上述操作方法由于各种原因没有设置成功,别着急,可以参照这篇文章,100%有效:hbuilder编辑器无法自动编译less文件的终极解决方案之koala考拉解析器

 

关于博主
骨灰级博客玩家
国内第一批90后网站站长/程序员
做过七年前端讲师
目前从事锦鲤观赏鱼电商行业
鱼贝贝锦鲤创始人
文章列表
1
已安装ssl安全协议证书的网站,通过.htaccess设置,实现全站http链接301重定向到https的方法
已安装ssl安全协议证书的网站,通过.htaccess设置,实现全站http链接301重定向到https的方法
2
webstorm代码缩略图插件
webstorm代码缩略图插件
3
程序员大哥给你介绍的对象,靠谱!
程序员大哥给你介绍的对象,靠谱!
4
安卓recovery模式刷机过程中提示“updater 过程结束 标志11”错误的解决方法
安卓recovery模式刷机过程中提示“updater 过程结束 标志11”错误的解决方法
5
神坑react native之打开SDK Manager.exe闪退无法打开的解决方法
神坑react native之打开SDK Manager.exe闪退无法打开的解决方法
最新评论
比比拉布
比比拉布
5月7日
太感谢了!!!!!!找了这么多的教程,只有你点出来了关键点——设计视图!!!!
Jake
Jake
3月7日
Halo 啊~麻烦更新下我的博客地址,原名:Jing Blog。麻烦更新如下: Jake Blog(后缀可以省略,也可以保留,看哪个风格适合) 网址:htt
评论于关于博主