Question

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 {
    background-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.

Answer 1

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.