LESS CSS background with relative path

问题

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.

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

回答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"

回答3:

The relative image path relates to the generated CSS file, not to the LESS file.

来源：https://stackoverflow.com/questions/10694990/less-css-background-with-relative-path

标签

css

less