本地或者是koala软件编译less文件为css

时间:2021-03-26 20:39:09

背景:

事情的起因是这般的,平时工作是在线上办公,样式是使用less来写,于是乎,这样我从线上download下来的less文件无法直接在自己的本地环境运行。有一个问题就是我要把less文件先编译成css文件,这样我才能在文件引入使用。对了,那我为什么不从线上拿通过前端构建工具打包编译好的css文件,这个已经被编译好的文件时有的,但是我只想取某一小段,要去找又因为被压缩过,找起来不方便,才有下面的内容。两个方法,1、我在本地装了less。2、另一种方法下载koala软件来编译less代码。

一、本地安装less来编译less文件

style.less

.wrap{
header {
font-size: 12px;
}
.content {
font-size: 12px;
}
}

在OSX安装遇到的问题:

上面是我写的一小段less代码。安装less根据lesscss.cn提示的方法,过程是一个命令,不过这里我想说我OSX下安装遇到的问题。

一句命令:$ npm install -g less    (全局环境下安装)

但在OSX有可能会遇到权限不足的问题,报错信息的最后第二行。

npm ERR! Please try running this command again as root/Administrator.

解决方法:在OSX命令行下,要用管理员的身份安装,加上sudo。

sodu $npm install -g less 就能解决该问题。

安装好less之后,如何使用?

lessc style.less   style.css   这样就已经把less编译为css了。

开心啊,我最初的问题成功解决了,下次我就能从线上项目拿出那段我想要的less代码,在本地编译后引入到文件中使用。但是有一个小问题,那我是否每次修改,每次都要去命令行编译less代码,有点麻烦。搜索了一下,可以使用koala软件实施监控less代码改变,然后编译这个文件。

 二、下载koala软件来编译less代码

下载地址http://koala-app.com/index-zh.html

遇到一个坑,编译文件的文件夹名不能是less,会导致编译不了,我栽坑了。

然后就是把文件拖过去,就好了。

参考链接:

http://www.w3cplus.com/blog/777.html