Parse .less files downloaded asynchronously
我在 web 应用程序中使用较少。在开发环境中，我有类似
1 2 3 4 | <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"> </head> |
这工作正常：我的 test.less 文件被下载并通过 less 自动转换为有效的 css。
现在，如果用户在网站的特定部分导航，我需要下载另一个 .less 文件。为此，我像这样动态创建一个元素：
1 | <link rel="stylesheet/less" type="text/css" href="test2.less"/> |
并将其附加到头部。
这不起作用 - 至少在 Chrome 66.0.3359.117 中 - 因为浏览器根本没有触发文件下载。
我通过修改链接'rel'属性解决了这个问题：
1 | <link rel="stylesheet" type="text/css" href="test2.less"/> |
这样，浏览器就可以正确下载文件test2.less；但是，它的内容不会被 less 自动解析，因此不会转换为有效的 .css
我认为下载 less.js 时，它会通过搜索所有具有属性 rel ="stylesheet/less" 的元素并解析它们来执行 - 停止。
但在那之后，它"停止"监听其他异步下载的 .less 文件。
有没有办法"触发"更少的解析？
谢谢
好的，到目前为止我已经找到了解决方案。
我敢打赌有更有效的解决方案，但现在我会这样做。
我追加元素
1 | <link rel="stylesheet/less" type="text/css" href="test2.less"/> |
在文件的头部，这不会触发文件下载。
之后，我调用函数
1 | less.registerStylesheets().then(less.refresh); |
这导致再次阅读文档的次数减少，请求所有文档并再次解析它们...效率不高，但它有效。
我想知道是否存在一种方法来告诉 less 只导入一个文件...
编辑：一个小改进：
而不是做
1 | less.registerStylesheets().then(less.refresh); |
我能做到
1 2 | less.sheets.push(link); less.refresh(); |
link 是对创建的链接的引用。这样less就不会再读一遍所有的文档，搜索链接了；相反，它只会为创建的新链接准备 XHR 并对其进行解析。