较少的CSS背景以及相对路径 [英] LESS CSS background with relative path

问题描述

在使用LESS作为网站的样式表时，我遇到了问题.就个人而言，我宁愿在CSS中使用相对路径，而不是绝对路径(仅是我的习惯)，但是现在当我将LESS与导入功能一起使用时，我有一个问题，如下所示.

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.

我在根文件夹中有一个main.less文件

I have a main.less file in root folder

@import "inc/inc.less";

和文件夹inc

.homeBgr {  
    background: url('icons/Home.gif');
}

图像Home.gif位于文件夹/root/inc/icons

 - main.less
      - inc
         - inc.less
         - icons
            - Home.gif

输出为lessc的是

.homeBgr {  
    background: url('icons/Home.gif');
}

但是，我的期望是

.homeBgr {  
   background: url('inc/icons/Home.gif');
}

如果我使用less.js作为客户端编译器，则会得到预期的输出，但是如果我使用lessc，则不会.

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.

推荐答案

您必须使用.less的转义功能.它看起来像这样.对其进行除错或使用Chrome萤火虫之类的东西检查路径是否无效，您需要将其调整为根文件夹.您至少可以在它逃脱后对其进行调整.

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

这篇关于较少的CSS背景以及相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！