css - 具有相对路径的 LESS 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，我不会。

有没有人遇到过同样的问题，并且有解决方案？或者真的，关于如何使它工作的任何建议。提前致谢。

score 6 · Accepted Answer

你必须使用 .less 的转义功能。它看起来像这样。如果这不起作用，您需要将其调整为根文件夹，请使用 chrome firebug 之类的东西来检查路径。不过，您至少可以在其逃脱后对其进行调整。

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

score 2 · Accepted Answer

不要将 main.less 放在 root 中，而将其他 less 文件放在 /inc 中，而是将所有 less 文件放入“css”、“styles”或“less”文件夹中。然后，您可以通过执行“../icons/home.gif”来使用一致的图像相对路径

score 1 · Accepted Answer

1

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

于 2014-11-25T08:57:43.173 回答

3 回答 3