gpt4 book ai didi

javascript - 动态加载 less.js 规则

转载 作者:技术小花猫 更新时间:2023-10-29 10:08:36 24 4
gpt4 key购买 nike

我正在考虑使用 less . 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”。 this tutorial 中明确注明了订购要求.

有没有办法在初始页面加载后加载更少的样式表?

请注意 this blog描述“监视”功能 -

which will auto-refresh the CSS whenever you save your LESS code

因此,我可以在页面加载后添加一些 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>

和 less 样式表

@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" 的标签— 尝试一下,如果有效请告诉我。

关于javascript - 动态加载 less.js 规则,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3175013/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com