Less CSS URL variable always shows server base URL before variable output

Consider this LESS code:

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

The output CSS is:

#login-form-submit {
    bac开发者_如何学运维kground-image: url("http://localhost:8080/webshop/rsc/css/specific//webshop/rsc/img/icons/login.png"); 
}

Does anybody know why this might be happening? If I abandon the variable and use the string directly, the CSS outputs as expected. (Without the fully qualified URL.)

The server this is running on is jBoss EAP 5.

Unfortunately, there is a problem where LESS is applying the relative URL to the beginning if the string starts with an interpolated variable. You could something like:

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

For more info, see this issue.

This appears to be fixed with LESS 1.3.3.

Until this bug in LESS is fixed (as @rcl mentions), a workaround is to always assume an absolute path for media that may be served from another location (say local server in dev, CDN in production).

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

where

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

It's worth noting that you can work around this issue by compiling the less (in JavaScript) rather then relying on the browser "stylesheet/less" parsing. Invoking the parser via JavaScript seems to somehow avoid the issue completely.