在浏览器端之间使用Less文件需要引入一个js插件 less.js 来完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/less" href="../less/test.less">
<script src="../lib/less/less.min.js"></script>
<script>less.watch();</script>
</head>
<body>
<h3>在浏览器端使用less</h3>
<p>1.less无法在浏览器端直接使用</p>
<p>2.浏览器不识别</p>
<p>3.必须解析成css代码</p>
<p>4.通过less解析插件（javascript）</p>
<p>5.引入less文件需要加上 type="text/less" </p>
<p>6.less.watch(); 无刷新预览样式</p>
<p>7.以http形式打开网页预览</p>
</body>
</html>原理
Less.js 插件的原理是使用Ajax，所以需要以HTTP协议打开文件，而不是使用文件协议 file://，然后读取出less文件的内容，语法分析处理成css，插入style标签注入到页面上。
必须 注册 为本站用户， 登录 后才可以发表评论！