dynamic加载less.js规则
我正在寻找使用较less 。 js （看起来不错），但我们的网站要求一些样式在初始页面加载后dynamic加载。 但是，似乎所有的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'，除非它们被正确地命令。 本教程中明确指出了sorting要求。
初始页面加载后有什么办法加载更less的样式表？
请注意， 这个博客描述了一个“手表”function –
它会自动刷新CSS，每当你保存你的LESS代码
所以看起来有理由期望我可以在页面加载后添加一些LESS规则。 感觉像我失去了一些东西。
干杯，
科林
更新：用于testing评论中描述的行为的代码（在脚本之后列出较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()将重新编译type="text/less" <style>标签 – 试试看，让我知道它是否工作。
感谢你提出这个问题 – 这对我很有帮助。 我只是更新主题，以显示我如何做dynamic添加CSS文件。
我使用了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();
你可以使用这个轻量级（3k）库来延迟加载less / css和js文件 （免责声明：我是作者）。
这很简单：
lazy.load('/static/less/style.less');
它也可以收到一个callback，加载一些更多的资产与依赖关系，并照顾caching。
