Question

我想知道是否有办法在页面加载后的某个时间加载单个less表单。 This question有一个解释如何重新加载所有工作表的答案，但对于我的用例，现有工作表永远不会依赖于新加载的工作表，并且最好只是懒惰地添加工作表。我在想像

less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);

可能代表一种可能的API？欢呼声，

科林

2010年12月3日更新：

我尝试过Livingston Samuel对less.js代码库的修复，虽然它确实有效，但它似乎无法识别已经加载的样式表中的定义。这是我的示例文件

一个。的index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simple</title>

  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
  <script src="/static/js/less-1.0.40.js"></script> 
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="abc"><div>Bingo</div></div>
</body>

<script>
console.log("loading new sheet");
less.loadStyleSheet("/static/less/style2.less", function() {
    console.log("Loaded!"); 
});

console.log("called");

</script>
</html>

湾style.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;
  }
}

℃。 style2.less

#abc {
  background: @primary_color;
  .rounded(10px);

  div {
    margin: 2px;
    color: blue;
  }
}

所以第二个样式表确实会延迟加载，但它在style2.less

中有以下解析错误

“。四舍五入未定义”

.rounded被定义为style.less，因为我没有卸载该表，我认为它应该仍然可用于当前环境中的编译器。

换句话说，我们不想重新开始，也不想卸载现有的定义，而是建立在已经加载的样式上。谢谢，

科林

Answer 1

我无法用上面的解释弄清楚这一点，所以我会提供自己的解释。

首先。页面加载后加载到Less样式表中。像这样：

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

大。现在选择样式表并将其推送到Less.js已有的工作表集合中。它期待一个DOM对象所以我使用了jQuery选择器。

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

如果有人知道更好的方法，请教育我。（我必须添加[0]才能使它正确。）如果你在控制台中这样做，它将返回一个数字。这个数字是少了多少张纸所知道的，所以希望它比你在页面加载时已经有的更高。

下一部分很简单。你告诉Less.js重新加载所有这些不太好的善良表，这包括你刚刚添加到其堆栈中的表。

less.refresh();

你去吧。这应该只是动态加载样式表，并告诉Less编译它。希望这会有所帮助。

Answer 2

less.js在其本地范围内有一个函数loadStyleSheet，可用于动态加载和解析较少的样式（延迟加载）。

唯一的问题是函数位于为定义less.js而创建的闭包中，因此您无法从代码中访问该函数。

也许它可以通过扩展api来暴露。

更新

我创建了less.js @ https://github.com/livingston/less.js

的分叉版本

使用此版本，您可以使用方法less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

加载任何样式表

我还向实际的库提出了拉取请求，希望他们接受我的更改。

Answer 3

刚刚收养MatthewForr回答我自己的需求：

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) {
    var $sheet = $('<link />', {
        href: fileName,
        rel: 'stylesheet/less',
        type: 'text/css'
    }).appendTo('head');
    less.sheets.push($sheet[0]);
});
less.refresh();

Answer 4

或者你可以写一些服务器端代码，它可以将你的.less样式表转换成.css。从客户端你可以懒得加载它，就像它是任何其他.css样式表一样。这是http://www.dotlesscss.org/使用的方法，尽管它可以被任何类型的.less使用。

也许不是你想要的东西，但我认为这是一个选择。

Answer 5

您可以将此轻量级库用于lazy load less / css and js files（免责声明：我是作者）。

这很简单：

lazy.load('/static/less/style.less');

它还可以接收回调，加载一些具有依赖关系的资产，并负责缓存。

Answer 6

您所要做的就是向DOM添加一个新的脚本标记。然后将下载并执行它。

function addScript (id, url)    //  Adds scripts to the DOM
{
    var s = document.createElement('script');
    s.id = id;
    if (url)    s.src=url;
    s.type='text/javascript';

    document.getElementsByTagName('head')[0].appendChild(s)
    return s;
}

这是我在我的网站上使用的，但我在解析时称之为。对于您将它用作延迟加载器，它应该可以正常工作，以onload或类似方式调用它。

less.js懒惰的纸张装载

6 个答案: