Less CSS URL 变量始终在变量输出之前显示服务器基本 URL

Question

考虑这个 LESS 代码：

#login-form-submit {
    @base-url: "/webshop/rsc/img";
    background-image: url("@{base-url}/icons/login.png");
}

输出 CSS 是：

#login-form-submit {
    background-image: url("http://localhost:8080/webshop/rsc/css/specific//webshop/rsc/img/icons/login.png"); 
}

有谁知道为什么会发生这种情况？如果我放弃变量并直接使用字符串，CSS 会按预期输出。 （没有完全限定的 URL。）

运行的服务器是 jBoss EAP 5。

Answer 1

不幸的是，如果字符串以插值变量开头，则 LESS 会在开头应用相对 URL，从而出现问题。您可以这样：

#login-form-submit {
  @url: "webshop/rsc/img";
  background-image: url("/@{url}/webshop/rsc/img");
}

有关更多信息，查看此问题。

Answer 2

LESS 1.3.3 似乎已修复此问题。

Answer 3

在 LESS 中的这个错误得到修复之前（如 @rcl 提到的），解决方法是始终假设可以从另一个位置提供服务的媒体的绝对路径（例如开发中的本地服务器，生产中的 CDN）。

background-image: url("http://@{base-url}/icons/login.png");

在哪里

@base-url: "localhost/static";  /* in dev */
@base-url: "sample.cdn.com";  /* in production */

Answer 4

值得注意的是，您可以通过编译 less（在 JavaScript 中）而不是依赖浏览器“stylesheet/less”解析来解决此问题。通过 JavaScript 调用解析器似乎可以完全避免该问题。