较少CSS背景与相对路径

Question

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

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

@import "inc/inc.less";

和文件夹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，我不会。

有没有人有同样的问题，并有解决方案吗？或者真的，关于如何使这个工作的任何建议。提前谢谢。

Answer 1

你必须使用.less的逃避功能。它看起来像这样。 firebug它或使用chromes firebug之类的东西检查路径，如果这不起作用，你需要将它调整到根文件夹。你可以在逃脱之后至少进行调整。

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

Answer 2

不要在/ inc中的root和其他较少的文件中使用main.less，而是将所有较少的文件放入“css”，“styles”或“less”文件夹中。然后，您可以通过“../ icons / home.gif”

使用图像的一致相对路径

Answer 3

相对图像路径与生成的CSS文件有关，而与LESS文件无关。