如何用sublimeText3编写less并用Nodejs自动编译成css
最近刚接触less,过程比较多怕以后再安装又要重新查资料,在这里把我的安装过程记录下来:
最后实现的效果就是在sublimeText3中编写less有语法高亮,
并且在每一次按crtl+s保存后 nodejs会把less自动编译生成css文件
1、安装Sublime 插件
(1)安装LESS插件:
因为Sublime不支持Less语法高亮,
所以,先安装这个插件,
(2)安装LESS2CSS插件:
less2css的读音 其实就是less to css
这个插件的作用是
当保存less文件的时候自动生成同名的css文件;
当保存less文件的时候提示编译错误信息;
批量编译项目目录下的所有less文件为css文件。
安装:
方法1:ctrl+shift+p>install Package>输入less2css按Enter
方法2:直接下载:https://github.com/timdouglas/sublime-less2css
解压文件 放到插件文件夹下
但是我们还要让sublime支持less并自动编译,所以还需以下步骤:
2、安装Node.js
首先先配置一下环境,
less需要nodejs支持,
所以我们先要安装一下nodejs
到nodejs官网下载就可以了:https:///en/
3、安装less
运行-cmd:
输入命令行:
npm install less -g
-g 代表着全局安装less
之后在 Sublime 里面建less文件时,会有一个错误
LESS: Unable to interpret argument clean-css
这是因为还需要一个插件
less-plugin-clean-css插件的安装
命令行为:
npm install less-plugin-clean-css -g
接着重启一下sublime,就搞定啦!
tips1:
如果Package control 点击install后出现这个报错
有可能是IPv6造成的,可以参考这篇文章解决问题
http://blog.csdn.net/freshlover/article/details/44261229/
或者其他原因,参考这篇文章
http://www.jianshu.com/p/a3af44257b15
如果还是没能解决问题,就用方法2手动下载吧
可以直接在github或百度上搜索这两个插件下载
在sublimeText菜单中选择首选项-浏览插件 打开插件文件夹
把下载的插件解压后扔进去就可以啦
tips2:
编译less后css被压缩成一行解决办法
当我们在sublimeText中编写less 按下ctrl+s 保存后
再去看我们的css 会发现它被压缩成了一行,像这个样子:

这个时候该怎么办呢,很简单,修改一下less2css插件的设置就可以了
在sublimeText菜单中选择 :
中文版:首选项→插件设置→Less2Css→Settings-Default
英文版:Preferences → Package Settings → Less2Css → Settings-Default
打开默认设置:

把"minify":true 的true 改成 false 记得保存一下 就OK啦
【mac版本注意】
mac版中的Settings-Default是不能直接修改的 你需要把Settings-Default中的内容粘贴到对应的Settings - User 然后再进行修改即可。
再编译一遍来看看效果:

完成!
|