LESS CSS background with relative path

Question

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.

Answer 1

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')";

Answer 2

Instead of having main.less in root and other less files in /inc, put all of your less files into a "css", "styles", or "less" folder. Then you can use a consistent relative path to images by doing "../icons/home.gif"