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

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.

What happens if you make it a relative path? background-image: url("../../@{base-url}/icons/login.png"); or something like that. — Matt K, Aug 11 '11 at 14:57
are you using less.js server-side or are you compiling with something like less.app or codekit? If less.js, what version are you running? I ran your less above through the less.app compiler and it came out sans the local host URL. Not sure, but it may have to do with your server environment. — Jonathan Miller, Aug 11 '11 at 19:41
Apologies for the late response, I didn't realise a comment had been made... Matt, relative paths work fine, but aren't a scalable solution on this project. Jonathan, I am using the client-side script (1.1.3) in this example, although this will be compiled server-side in production. I think it is a server configuration too. Perhaps I need to ask some jBoss experts, with a broader example. Thank you both for responding. — Kieran Hall, Aug 15 '11 at 14:38
As mentioned below this has been fixed, see http://stackoverflow.com/questions/9640080/less-incorrectly-importing-files-with-urls/16756664#16756664 — Aram Kocharyan, May 26 '13 at 06:07

score 13 · Accepted Answer · answered Nov 09 '11 at 20:43

13

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.

answered Nov 09 '11 at 20:43

rcl

954
10
18

This doesn't work, see my answer here http://stackoverflow.com/questions/6294126/anyway-to-set-a-common-image-path-for-less-files/11573279#11573279 – jonschlinkert Jul 20 '12 at 05:18

score 1 · Answer 2 · answered Jan 24 '13 at 19:45

1

This appears to be fixed with LESS 1.3.3.

answered Jan 24 '13 at 19:45

Ross Solomon

665
4
12

score 0 · Answer 3 · answered May 11 '12 at 18:25

0

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 */

answered May 11 '12 at 18:25

JCotton

11,650
5
53
59

2

CSS shouldn't need to know about domains :( – Aram Kocharyan May 26 '13 at 06:07

score 0 · Answer 4 · answered May 15 '12 at 19:13

0

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.

answered May 15 '12 at 19:13

WraithKenny

1,001
13
15

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

4 Answers4