Javascript 动态加载 less.js 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3175013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load less.js rules dynamically
提问by hawkett
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
我正在考虑使用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>
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.
但如果换行，它就会失败，除非正确排序，否则 firefox 和 chrome 似乎都不会尝试加载“style.less”。本教程中明确指出了订购要求。
Is there any way to load less stylesheets after initial page load?
有没有办法在初始页面加载后加载更少的样式表？
Note that this blogdescribes a 'watch' feature -
请注意，此博客描述了“观看”功能 -
which will auto-refresh the CSS whenever you save your LESS code
每当您保存 LESS 代码时，它将自动刷新 CSS
so it seems reasonable to expect that I could add some LESS rules after page load. Feels like I'm missing something.
所以期望我可以在页面加载后添加一些 LESS 规则似乎是合理的。感觉好像我错过了什么。
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;
}
}
回答by cloudhead
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.
我刚刚推送了 1.0.31——它有一个方法：less.refreshStyles()它会重新编译<style>标签type="text/less"——试试看，让我知道它是否有效。
回答by St3ph
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.
感谢您提出这个问题——它对我帮助很大。我只是更新主题以展示我是如何动态添加 CSS 文件的。
I used the last version of LESS (1.3.3).
我使用了 LESS (1.3.3) 的最新版本。
var stylesheetFile = 'file.css';
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/less";
link.href = stylesheetFile;
less.sheets.push(link);
less.refresh();
回答by Oren Yakobi
You can use this lightweight (3k) library to lazy load less / css and js files( disclaimer: i am the author).
您可以使用这个轻量级 (3k) 库来延迟加载 less / css 和 js 文件（免责声明：我是作者）。
This is as simple as:
这很简单：
lazy.load('/static/less/style.less');
It can also receive a callback, load some more assets with dependencies and takes care about cache.
它还可以接收回调，加载更多具有依赖项的资产并处理缓存。
回答by sapir
I found an up-to-date version of the script that works perfect with LESS file:
我发现该脚本的最新版本与 LESS 文件完美配合：
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>
Instead using
而是使用
less.refreshStyles()
use
用
less.refresh()
