Less | Less（Brower版本）

程序员文章站 2022-07-03 16:33:16

...

先直接给出源代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="./Less/less.min.js"></script>
    <title>Less学习</title>
</head>
<body>
    <div class="header">
       
    </div>
</body>
</html>

styles.less

@nice-blue: rgba(22, 110, 197, 0.2);
@light-blue: #c2f2f8;

.header {
    background: @light-blue;
    width:100px;
    height:100px;
}

上面得注意的问题！！！

在引入less.js前先要把你的样式文件引入
link必须加入rel=“stylesheet/less” type=“text/css”

除此之外，你可能会发现，上面的html文件在Chrome打开的时候，会报以下错误:

Less | Less（Brower版本）

解析

由于上面的less.min.js文件是直接从（https://cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js）保存下来的，加入直接打开html文件，而不是处于web环境下运行。属于一个跨域请求，而刚好Chrome默认的情况下是不支持跨域请求的，所以报错！！！

假如坚持这样子打开有以下两种方法:

1、在Firefox下是正常的，你就在Firefox下做测试吧

2、使Chrome支持跨域请求

步骤：
1、在chrome快捷方式哪里右键->属性->在目标哪里后面添加：–user-data-dir=“c:\ChromeDebug” --test-type --disable-web-security ->确定
Less | Less（Brower版本）
2、打开浏览器（假如设置成功，则显示下面）

将文件拖拽进来，成功!