LESS导入CSS和相对路径

Question

我正在使用LESS来组织和导入所有的CSS文件，同时我也在使用Twitter Bootstrap，并将其整合到我的style.less中。它可以正常工作，但是当我使用lessc将less文件压缩成一个文件时，所有与我的twitter bootstrap css相关的东西都会变得一团糟。原因是我的bootstrap.min.css文件对于图片的相对路径为"../img"，所以当我压缩所有这些文件并输出到目标文件夹时，它无法找到这个路径。

该如何解决这个问题呢？我不想在我的css中硬编码绝对url。

style.less
    @import './folder_one/file_one';
    @import './folder_one/file_two';
    @import './folder_two/file_one';
    @import './folder_three/file_one';
    // this bootstrap css references images relatively ../img/
    @import './bootstrap/bootstrap.min.css';

- user391986

---

我建议您使用.htaccess来实现这个功能。 - Ron van der Heijden

Answer 1

在运行lessc时使用--relative-urls标志。

lessc --relative-urls

默认情况下文档记录不足，但值为false，这意味着所有@import的文件将保持它们原来的url（例如background-image、font-face等）。这是因为less已经在做这个事情了，许多用户希望它保留他们的url不变。

当使用relative-urls标志时，lessc根据导入的less/css文件所在位置重新编写所有url。

示例：

/dir1/style/main.less

// if you don't include (less) lessc will leave bootstrap
//   as an @import at the top of the lessified css file
@import (less) '../bootstrap/bootstrap.min.css';

/dir1/lib/bootstrap/bootstrap.min.css

background-image:url("../img/bs-img.gif");

结果：

/dir1/style/main.css

background-image:url("../bootstrap/img/bs-img.gif");

- Planky

Answer 2

请查看命令行使用文档。https://github.com/cloudhead/less.js/wiki/Command-Line-Usage。有一个名为--root-path的选项，它将在现有URL前添加内容，以便它们可以在输出的CSS文件中正常工作。

lessc [option option=parameter ...] <source> [destination]

lessc -rp=will/be/prepended sourcefile.less path/to/destination

例如：

这是原始的URL，文件在css/src/nest中。

background-image: url('../../../imgs/bg.png');

以下是我在命令行中的操作步骤。请注意，-rp参数应该从输出目录指向原始文件位置

lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less

输出结果，文件位于css/目录下。

  background-image:url('src/nest/../../../imgs/bg.png')

---

有一个--relative-urls选项，但我无法使其正常工作。我正在使用上述解决方法的构建脚本。Build-o-Matic

这是我处理确定路径的方式：[链接]

- posit labs

---

尝试使用相对路径，添加标志 -ru 或 --relative-urls，在我的情况下有效（使用 lessc 1.4.0）。 - user1

好的，我提到了。这个解决方法的整个原因是因为“-ru”选项没有起作用。 - posit labs

Answer 3

我刚遇到了这个问题并解决了它。 解决方法是在要导入的样式表路径前添加../，直到找到它为止。请看这里:

然后我添加了多个../，直到逃离到想要的目录，它就起作用了。

- Safi Habhab

Answer 4

刚刚来到这里，因为我也遇到了在我的less文件中解析图像URI的问题。

“--relative-urls”给了我正确的方向。

对于其他也来到这里的人： 这个参数已经被弃用了，现在你可以使用“--rewrite-urls”并选择“off”，“all”或“local” - 详细描述在这里。

- Scorpoon

---

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 5

--relative-urls标志在浏览器中也有对应的功能。

<script>
less = {
    env: "development",
    relativeUrls: true
};
</script>
<script src="less.min.js"></script>

- sanmai