LESS CSS background with relative path

css, less

Solution

you have to use .less 's escaping feature. It will look something like this. firebug it or use chromes firebug like thing to check the path if this doesn't work and you need to adjust it to a root folder. you can at least adjust it after its escaped though.

background: ~"url('inc/icons/Home.gif')";

Problem

I'm facing with a problem when using LESS as stylesheet for my website. Personally, I'd rather use relative path in CSS than an absolute path (only my habit), but now when I use LESS with importing feature, I have a problem as the following demonstrates. I have a `main.less` file in root folder ``` @import "inc/inc.less"; ``` and a file `inc.less` in folder `inc` ``` .homeBgr { background: url('icons/Home.gif'); } ``` the image `Home.gif` is in folder `/root/inc/icons` ``` - main.less - inc - inc.less - icons - Home.gif ``` with `lessc` output is ``` .homeBgr { background: url('icons/Home.gif'); } ``` However, my expectation is ``` .homeBgr { background: url('inc/icons/Home.gif'); } ``` If I use less.js as client compiler, I got the output as expected, however If I use `lessc`, I do not. Has anyone had the same problem, and has a solution for this? Or really, any suggestions on how to get this working. Thanks in advance.

Original source