Css 解析异步下载的.less文件_Css_Less

Css 解析异步下载的.less文件

css less

Css 解析异步下载的.less文件,css,less,Css,Less,我在一个网络应用程序中使用的更少。在开发环境中，我有 <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.

我在一个网络应用程序中使用的更少。在开发环境中，我有

<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文件

有没有一种方法可以“触发”更少的解析

谢谢你

好的，到目前为止我已经找到了解决办法

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

我附加元素

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

这会导致更少的人再次阅读文档，请求所有文档并再次解析所有文档。。。效率不高，但它能工作

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

编辑：一个小的改进：

而不是做

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

我能行

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

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

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