Javascript 动态加载less.js规则

我正在考虑使用。（看起来不错），但我们的网站要求在初始页面加载后动态加载某些样式。然而，似乎所有LESS样式表都必须在加载LESS.js脚本之前加载。i、 这是有效的

<link rel="stylesheet/less" href="/static/less/style.less"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

---

我刚刚推出了1.0.31-它有一个方法：

less.refreshStyles（）

，它将用

type=“text/less”

重新编译

标记-试用一下，让我知道它是否有效。

谢谢你提出这个问题-它帮了我很多忙。我只是更新这个主题，以展示如何动态添加CSS文件

我使用了LESS的最新版本（1.3.3）

---

您可以使用这个轻量级（3k）库（免责声明：我是作者）

这很简单：

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

---

它还可以接收回调，加载更多具有依赖项的资产，并负责缓存。

我发现了一个最新版本的脚本，它可以完美地处理更少的文件：

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

使用

---

对不起，我的回答是反对的，但是你能详细说明一下为什么你打算在页面加载后添加CSS规则吗？该网站包含用户贡献的小部件，用户自己贡献CSS（或者更少，希望如此）。给定的页面可能会显示许多小部件。当显示新的小部件时，它不会重新加载整个页面，而是动态加载html和css。该站点运行在google app engine（python）上，我的印象是，没有一个python API可以在服务器上进行较少的编译。下一个调用端口可能是使用外部服务器并将编译任务发送给它，但如果可能的话，最好不要达到这种程度-less.js非常接近解决问题。您好-感谢您的回复。我应该提到，css是通过动态地将添加到文档头中来加载的，因此它不包含在标记中。我想我可以改为将较少的文档作为原始文本加载，并将原始样式标记写入文档头-您认为可以使用标记吗？ThxI对这两种方法进行了快速测试——首先是动态添加的标记——我遇到的问题是，我似乎无法添加类型为class='text/less'（使用jquery）的样式标记——在firefox和chrome中，它总是恢复为'text/css'。我可以看到加载了id='less:static less style'的文档的样式标记，但它也有一种“text/css”类型，因此看起来与jQuery无关。对于使用less.refresh（）的第二种方法-我无法让它在导入less.js脚本后在头部显示的文档更少的情况下工作。抱歉-我误读了你的上一条评论-less.sheets.push（）效果很好-我编辑了原始问题中的代码以显示它工作-谢谢。出于兴趣，是否可以在不刷新所有内容的情况下处理单个工作表-例如，更少的工作表。推送（mySheet）；减。加载样式表（mySheet）？对于我的用例，现有的工作表从来没有依赖于新加载的工作表…@cloudhead，您能告诉我如何在React中导入更少的实例吗？我的意思是，在调用less.refreshStyles（）之前，需要一个less的实例。实例来自哪里？我能知道较少的实例来自哪里吗？我在用React。我是说。。你必须少从某处进口，对吗？

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();

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

  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js"></script>

less.refreshStyles()

less.refresh()