在不同域之间导入 LESS 文件时遇到问题

Question

警告：解释可能有点长。如果你赶时间，直接跳到问题的末尾，我在这里总结了我根据我的问题寻找的内容。

问题是： 我必须从另一个 LESS 文件（来自域 B）加载一个 LESS 文件（来自域 A），并使用 LESS.js。在那之前，没有伤害； official website 开头的说明开箱即用。

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

但是，B 中还有其他 LESS 文件（比方说 module1/less、module2/less，等等），A 应该包含这些文件的 @imports。此外，还有多个类似于 B 的其他域（C、D、E...）。这就是问题的开始。我找不到合适的方法来做到这一点，考虑到我无法更新 C、D 和 E（其他人需要这样做，并且出于官僚主义的原因，他们只能在我之后这样做），只有 A和 B，因此 A 需要与旧版本的 C、D 和 E 兼容（以防它们需要任何更改）。

在导入的 LESS 文件中执行 @import 时，其相对路径是根据相同的 LESS 文件路径，但由于该 LESS 文件可能从 B、C、D 或 E 加载，我无法提供开箱即用的绝对路径。

我试过的(1):我肯定需要找到一种方法来将域名从B提供给A。首先，我尝试在less.min.js B 域中的行 HTML 文件:

<script>
less = {plugins: [{
    install: function(less, pluginManager, functions) {
        functions.add('getRootLessFolder', function() {
            var getDomain = function() {
                return window.location.protocol + "//" + window.location.host + "/";
            }
            return getDomain() + "less/";
        });
    }
}]}
</script>

然后将其添加到 B 的主要 LESS 文件的开头：

@root-less-folder: getRootLessFolder();

所以我可以将 A 中的 @imports 更新为：

@import "@{root-less-folder}module1/less";

这种方法奏效了……直到我尝试将它与旧版本的 B 一起使用，然后再进行上述更改。这样，LESS 声称 @root-less-folder 未定义，即使我将 (optional) 添加到 @import.

我试过的（2）： 我也试过在服务器B中使用paths 属性，像这样：

  var getDomain = function() {
    return window.location.protocol + "//" + window.location.host + "/";
  }
  var lessFolder = getDomain() + "less/";
  less = {paths:[lessFolder]};

因为根据 documentation:

lessc --include-path=PATH1;PATH2 { paths: ['PATH1', 'PATH2'] }

If the file in an @import rule does not exist at that exact location, Less will look for it at the location(s) passed to this option. You might use this for instance to specify a path to a library which you want to be referenced simply and relatively in the Less files.

所以我想我可以使用它来让 less 自动找到 LESS 文件，只需在 A:

中使用下面的行

@import (optional) "module1/less";

所以它不会在服务器 A 中找到 module1/less，但会在服务器 B 中找到它，因为 paths 属性。虽然，它似乎并没有尝试在 B 中找到 module1/less。相反，Chrome 控制台从服务器 A 溢出 404 错误，并且 module1/less 来自 B 的内容不存在在生成的 CSS 样式中（也没有控制台错误），就像它甚至没有尝试过一样。

我需要什么：我需要一种方法使方法 1 或 2 在这些条件下工作，甚至是方法 3。

能够填充 LESS 变量（如果未填充仅）将解决方法 1；
弄清楚 LESS 的 paths 应该如何工作可能有助于使用方法 2；
尽管如此，也许您对该问题还有其他建议，也可以解决。

Answer 1

我已经设法解决了我的问题。如果其他人遇到这个问题，我将描述我所做的事情：显然，虽然您不能引用未定义的变量，但您可以引用未定义的 plugins（在这些情况下，它们被标识为字符串）。

所以我在B域HTML文件的less.min.js行之前添加了：

<script>
less = {plugins: [{
    install: function(less, pluginManager, functions) {
        functions.add('getRootLessFolder', function() {
            var getDomain = function() {
                return window.location.protocol + "//" + window.location.host + "/";
            }
            return getDomain() + "less/";
        });
    }
}]}
</script>

并将 A 中的 @imports 更新为：

@root-less-folder: getRootLessFolder();
@import (optional) "@{root-less-folder}module1/less";

所以当 getRootLessFolder 被定义时，路径基于它的 returned 值，如果没有，路径是 "getRootLessFolder()module1/less"，这将 return 一个 404，但由于它是一个可选的 @import，所以不会有问题。

因此，如果服务器 B 已更新，则服务器 A 中的更改将起作用。如果服务器 B 未更新，更改是服务器 A 也不会破坏它。

在不同域之间导入 LESS 文件时遇到问题

Trouble importing LESS files among different domains

less