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

Posted 2020-07-28

背景：

事情的起因是这般的，平时工作是在线上办公，样式是使用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