使用相对路径的LESS CSS背景

Question

我在使用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，则不行。

是否有人遇到过相同的问题，并且有解决方案？或者有什么建议可以让这个工作。提前感谢。

- Khoi Nguyen

Answer 1

您需要使用.less的转义功能。它看起来像这样。如果这不起作用并且您需要将其调整为根文件夹，请使用Firebug或Chrome类似的工具检查路径。即使在转义后也可以进行调整。

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

- Rooster

---

我认为这种方式会让我或客户在查看inc.less文件时感到困惑，因为相对路径没有意义（与inc.less文件无关）。 - Khoi Nguyen

Answer 2

将原本放在根目录下的main.less文件和其他的less文件放到一个名为“css”、“styles”或者“less”的文件夹中。这样，你就可以通过使用相对一致的路径来访问图片，示例： "../icons/home.gif"。

- GeekyMonkey

Answer 3

相对图片路径是与生成的CSS文件相关，而不是与LESS文件相关。

- Mark Howells-Mead