css - @Import 客户端少编译

Question

我想创建一个 Bootstrap 配置页面，而不是喜欢自己customise bootstrap page , 但有实时预览。

因此我想在浏览器中编译更少的文件 as detailed in this question ，但我不知道如何处理 @import。

通常，less 知道要导入的文件的路径，但在浏览器上下文中，文件路径模型不适用。

如何编译 less 浏览器端，并使用 @import 功能？

Answer 1

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

在上面的 global.less 中，已使用 XMLHttpRequest 打开，另请参阅 How to open a local disk file with Javascript? .

您想要使用@import 指令导入global.less 的文件可以放在同一目录global.less 中。请注意，浏览器应该可以访问此目录。文件也可以放在global.less目录的子目录或相对目录中。

另见 http://lesscss.org/usage/#using-less-in-the-browser您可以通过在调用编译器之前定义全局 less 对象来设置 less.js 编译器的选项。这使您能够设置 include_path 和 rootpath，include_path 可用于定义在何处搜索导入，而 rootpath 将相对 url 重写到基本 less 文件。

注意对于您的实时预览，您应该调用 less.refreshStyles()/less.modifyVars，参见 ModifyVars issue when trying to change variables one by one除非允许重新加载(和重新编译)。