# 二、Less编译

less是没有办法直接使用在浏览器上面的,只有css才能直接使用到浏览器的上面。所以我们要把less编译成css

# 1. 新建一个less文件

先新建一个less文件,保存到桌面

@color:red;
a{
    color:@color;
}
1
2
3
4

# 2. 编译的几种方式

# 2.1 GUI编译工具

初学者建议使用GUI编译工具来编译less文件,下面是推荐的几个编译工具

# 2.2 node.js

安装了node之后就可以直接用node.js来编译了。 在桌面目录中打开cmd,然后执行命令dir(获取当前目录的所有文件) --> 在当前目录上面写命令

lessc less.less less.css
1

就可以看到在桌面上同时生成了一个less.css的文件 打开之后里面的内容是:

a{
    color:red;
}
1
2
3

这样就可以在html中引用了。(在编译的过程中,同时会进行检查,如果语法有错就会报错)

# 2.3 使用 clean-css 插件

安装了这个插件之后,输出的时候就可以转化成压缩过的css

# 安装clean-css插件
npm i -g less-plugin-clean-css
# 编译的时候使用插件
lessc --clean-css styles.less styles.min.css
1
2
3
4

# 2.4 浏览器端不经编译直接使用(不建议直接在生产环境中使用)

  • 在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
<!--注意这里rel里面的值是stylesheet/less,不是stylesheet-->
1
2
<script src="lesscss-1.4.0.min.js"></script>
1

特别注意:

这里浏览器使用的是ajax来拉取.less文件,所以如果文件是file://开头和跨域CORS的情况,就无法拉取less文件,还有部分服务器(IIS居多)会对未知的后缀名的文件返回404

解决方案就是为.less文件配置MIME值为text/css,或者直接将.less文件改名为.css文件即可

更新时间: 2021-02-25 00:05