解析异步下载的 .less 文件答案

【问题标题】：Parse .less files downloaded asynchronously解析异步下载的 .less 文件
【发布时间】：2025-12-05 08:30:01
【问题描述】：

我在 web 应用程序中使用较少。在开发环境中，我有类似的东西

<head>
    <link rel="stylesheet/less" type="text/css" href="test.less"/>       
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>
</head>

这工作正常：我的 test.less 文件被下载并通过 less 自动转换为有效的 css。

现在，如果用户在网站的特定部分导航，我需要下载另一个 .less 文件。为此，我像这样动态创建一个元素：

<link rel="stylesheet/less" type="text/css" href="test2.less"/>

并将其附加到头部。

这不起作用 - 至少在 Chrome 66.0.3359.117 中 - 因为浏览器根本没有触发文件下载。

我通过修改链接'rel'属性解决了这个问题：

<link rel="stylesheet" type="text/css" href="test2.less"/>

这样，浏览器就可以正确下载文件test2.less；但是，它的内容不会被less自动解析，因此不会转换为有效的.css

我认为下载 less.js 时，它会通过搜索所有具有属性 rel = "stylesheet/less" 的元素并解析它们来执行 - 停止。

但在那之后，它“停止”监听其他异步下载的 .less 文件。

有没有办法“触发”更少的解析？

谢谢

【问题讨论】：

标签： css less

【解决方案1】：

好的，到目前为止我已经找到了解决方案。

我敢打赌有更有效的解决方案，但现在我将继续这样做。

我追加元素

<link rel="stylesheet/less" type="text/css" href="test2.less"/>

在文件的头部，这不会触发文件下载。

之后，我调用函数

less.registerStylesheets().then(less.refresh);

这导致再次阅读文档的次数减少，请求所有文档并再次解析它们...效率不高，但它有效。

我想知道是否存在一种方法来告诉 less 只导入一个文件...

编辑：一个小改进：

而不是做

less.registerStylesheets().then(less.refresh);

我可以的

less.sheets.push(link);
less.refresh();

link 是对所创建链接的引用。这样 less 不会再阅读所有文档，搜索链接；相反，它只会为创建的新链接准备 XHR 并对其进行解析。

【讨论】：