动态加载less.js规则 [英] Load less.js rules dynamically
问题描述
我正在使用较少。 js （看起来不错），但我们的网站要求一些样式在初始页面加载后动态加载。然而，似乎所有的LESS样式表必须在less.js脚本加载之前加载。
I'm looking at using less.js (looks great), but our site requires that some styles be loaded dynamically after initial page load. It seems, however, that all LESS stylesheets must be loaded prior to the less.js script load. i.e. this works
<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。少，除非它们被正确排序。排序要求在本教程中有明确说明。
but it fails if the lines are swapped around, neither firefox nor chrome appear to attempt loading 'style.less' unless they are ordered correctly. The ordering requirement is noted explicitly in this tutorial.
有没有办法在初始页面加载后加载更少的样式表？
Is there any way to load less stylesheets after initial page load?
请注意，此博客介绍了观看功能 -
Note that this blog describes a 'watch' feature -
<它会在您保存您的LESS代码时自动刷新CSS
which will auto-refresh the CSS whenever you save your LESS code
，所以似乎有理由期望我可以添加一些LESS规则页面加载。感觉我缺少某些东西。
so it seems reasonable to expect that I could add some LESS rules after page load. Feels like I'm missing something.
干杯，
Colin
UPDATE：用于测试评论中描述的行为的代码（脚本后面列出的样式表较少） -
UPDATE: code used to test behaviour described in comments (less style sheet listed after the script) -
<!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;
}
}
推荐答案
I只是推送1.0.31 - 它有一个方法： less.refreshStyles（）将重新编译< style> 标签与 type =text / less - 试试看，让我知道如果它工作。
I just pushed 1.0.31 — it has a method: less.refreshStyles() which will re-compile <style> tags with type="text/less" — try it out and let me know if it works.
这篇关于动态加载less.js规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
