具有相对路径的 LESS CSS 背景答案

【问题标题】：LESS CSS background with relative path具有相对路径的 LESS CSS 背景
【发布时间】：2012-05-28 12:40:57
【问题描述】：

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

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

@import "inc/inc.less";

和文件夹inc中的文件inc.less

.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，我不会。

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

【问题讨论】：

标签： css less

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：