动态加载less.js规则

我正在考虑减少使用。js(看起来不错),但我们的网站要求在初始页面加载后动态加载某些样式。但是,似乎所有LESS样式表必须在less.js脚本加载之前先加载。即这有效

<link rel="stylesheet/less" href="/static/less/style.less"/>

<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

但是如果换行,它将失败,除非正确订购,否则Firefox和chrome都不会尝试加载“style.less”。在本教程中明确指出了订购要求。

有什么方法可以在初始页面加载后加载更少的样式表?

-

保存您的LESS代码时,它将自动刷新CSS

因此期望在页面加载后可以添加一些LESS规则似乎是合理的。感觉就像我错过了什么。

更新:用于测试注释中描述的行为的代码(脚本后面列出的样式表较少)-

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Simple</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="/static/js/less-1.0.31.min.js"></script>

<link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>

</head>

<body>

<div id="container">

<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>

</div>

<div id="#abc">Bingo</div>

</body>

<script>

console.log("refreshing styles...");

less.sheets.push(document.getElementById('abc123'));

//var lessStyle = $("<style>#abc { color: blue; }</style>").attr("id", "less:static-less-style").attr("type", 'text/less');

//$("head").append(lessStyle);

less.refresh(true);

console.log("refreshed...");

</script>

</html>

和更少的样式表

@primary_color: green;

.rounded(@radius: 5px) {

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

border-radius: @radius;

}

#container {

background: @primary_color;

.rounded(5px);

div {

color: red;

}

}

回答:

我刚刚推送了1.0.31,它有一个方法:可以使用less.refreshStyles()它重新编译<style>标签,请type="text/less"尝试一下,让我知道它是否有效。

以上是 动态加载less.js规则 的全部内容, 来源链接: utcz.com/qa/434722.html

回到顶部