Less CSS Background with Relative Path

Can less.js handle relative paths for images?

Try quoting the URL, I always do it this way to keep it neat though,

@header-image: "../img/header.jpg";

background: url(@header-image);

Also, the URL code can be seen on github. Looks like it is added if you are running in a browser.

How can I get the right relative paths in my compiled LESS css files?

Have a look at https://github.com/marklagendijk/WinLess/issues/12
It seems to be related with exactly the version you are using (1.5.3). I recommend to update to the latest winless build which is already 1.8.0.

There have been several issues with relative paths along the way of winless. But most of them seem to be fixed. See also https://github.com/marklagendijk/WinLess/issues/search?q=path

Please note that the default behavior of the less compiler is actual to retain the relative path as you would expect.

Is there a way to set a common image path for LESS files?

Try using string interpolation for things like this. Look for “variable interpolation” in docs.

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

---

Related Topics