css - 我可以从不同的来源编译更少的文件吗？

Question

好吧，我在一家使用 Bootstrap 和较少 css 的公司工作。现在，对于每个客户，它们包括我们所有不会更改的“核心”less 文件以及仅供该客户使用的 less 文件。我们想清理它并为“核心”文件设置一个中央位置，然后在每个客户端文件夹中我们只拥有 2-3 个仅供客户端使用的文件。

bootstrap 能否从多个位置进行 less 编译？

这是关于我们现在拥有什么和我们想要什么的结构。

我们现在拥有的:

客户 1:

• 客户少文件
• “核心”少文件

客户 2:

• 客户少文件
• “核心”少文件

客户 3:

• 客户少文件
• “核心”少文件

我们想要的:

“核心”少文件

客户 1:

• 客户少文件

客户 2:

• 客户少文件

客户 3:

• 客户少文件

希望这是有道理的。谢谢

Answer 1

我想你的问题是关于你的 less 代码的客户端编译(参见:http://lesscss.org/#client-side-usage)。

当使用 less.js 客户端编译器时，你可以包含多个文件:

<link rel="stylesheet/less" type="text/css" href="core.less">
<link rel="stylesheet/less" type="text/css" href="client.less">
<script src="js/less.js" type="text/javascript"></script>

当你将上述情况下的 core.less 移动到另一个域时:

<link rel="stylesheet/less" type="text/css" href="http://yourdomain.com/core.less">

您首先会遇到跨域问题。这可以通过启用 CORS 来解决，请参阅:http://enable-cors.org/ .在已安装 core.less 的域上，服务器应发送一个 Access-Control-Allow-Origin: * header 。

less.js 使用支持大多数现代浏览器 CORS 的 XMLHttpRequests 加载 less 文件，请参阅 http://caniuse.com/#search=cors .更多详细信息，请访问 http://www.html5rocks.com/en/tutorials/cors/

请注意，less.js 编译器在不同范围内编译彼此独立的每个文件。所以本例中的client.less 文件不能使用core.less 中定义的mixins 和变量。

另请注意，由于性能问题，在大多数情况下，您不应将客户端编译用于生产。