在本地/服务器部署less.js

👨‍💻 2020-03-04

Less这个项目在我刚开始学习前端的时候就已经有所耳闻了，直到今天才有了在项目中一展拳脚的机会。之前做demo的时候一直是在html中引入less.min.js来使用的，但是很快就发现一个问题：

不兼容IE浏览器。

是的，IE 11都报错，更别提低版本的了。好在less有命令行版本，它能够让你使用less.js将less文件转换为css文件。这样在项目中，你引用的其实还是原始的css文件，这样就不存在兼容问题了。

如果你的电脑上装了npm，那么事情将会变得简单得多：

npm install less -g

只需要一个命令就可以安装，less命令行的运行依赖nodejs环境，如果你还没有安装nodejs，可以在它的官网下载安装。

less的安装完成了，使用的话也很简单：

lessc main.less main.css

以上命令将会把main.less直接转换成main.css。

转换是完成了，可是又出现一个问题，我们知道，css这种东西是需要不断的调试的。现有的机制下，每保存一下less，就要去CMD里面转换一下，这样无疑降低了我们的工作效率，要是能在保存的时候自动转换css就好了。

万能的G站啊，我搜了一下，还真有：

还是npm：

npm install -g less-watch-compiler

或者yarn：

yarn global add less-watch-compiler

假设你的文件系统如下：

 root 
 └──less
 │    └── main.less
 │    └── skin.less
 └──css
      └── main.css

那么具体的使用方法如下：

less-watch-compiler less css

这样保存less文件后这个插件就会自动构建css，速度也是非常的快，可以同时检测多个less文件，如果只需要监测一个less文件的话，在上面的命令行后面加上该less文件的文件名就可以了：

less-watch-compiler less css main.less

Recommend