我正在考虑使用 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”，除非它们的顺序正确。 本教程中明确注明了订购要求。
有没有办法在初始页面加载后加载更少的样式表？
请注意这个博客描述了“观看”功能 -
每当您保存 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;
}
}
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>
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 -
which will auto-refresh the CSS whenever you save your LESS code
so it seems reasonable to expect that I could add some LESS rules after page load. Feels like I'm missing something.
Cheers,
Colin
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>
and the less stylesheet
@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;
}
}
发布评论
评论（4）
感谢您提出这个问题——这对我帮助很大。我只是更新主题，以展示我如何动态添加 CSS 文件。
我使用了 LESS 的最新版本（1.3.3）。
thanks for asking this question – it helped me a lot. I’m just updating the topic in order to show how I did to dynamically add a CSS file.
I used the last version of LESS (1.3.3).
您可以使用这个轻量级 (3k) 库延迟加载 less / css 和 js 文件（免责声明：i我是作者）。
这很简单：
它还可以接收回调，加载更多具有依赖项的资源并处理缓存。
You can use this lightweight (3k) library to lazy load less / css and js files ( disclaimer: i am the author).
This is as simple as:
It can also receive a callback, load some more assets with dependencies and takes care about cache.
我发现该脚本的最新版本可以与 LESS 文件完美配合：
而不是使用
use
I found an up-to-date version of the script that works perfect with LESS file:
Instead using
use
我刚刚推送了 1.0.31 - 它有一个方法：
less.refreshStyles()它将使用type="text/ 重新编译I just pushed 1.0.31 — it has a method:
less.refreshStyles()which will re-compile<style>tags withtype="text/less"— try it out and let me know if it works.