少导入CSS和相对路径

Question

我使用LESS来组织和导入我的所有CSS文件。我也使用Twitter Bootstrap，我将其集成在我的style.less中。它工作得很好，但是当我使用lessc来缩小较少的文件并将其压缩为一个时，我的twitter bootstrap css就会崩溃。原因是我的bootstrap.min.css与图像的相对路径为"../img"，因此当我缩小所有这些文件并转储输出文件时，它不再找到此路径。

我究竟应该如何解决这个问题，我不想在我的CSS中硬编码绝对网址？

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';

Answer 1

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

lessc --relative-urls

记录不佳，但默认情况下它是假的，这意味着所有@imported文件都会保持其网址（例如background-image，font-face等）。这是因为较少的人已经这样做了，许多用户希望它只留下他们的网址。

当使用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");

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

---

例如：

这是原始网址，文件位于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

这是我处理确定路径[link]

的方法

Answer 3

我只是遇到了这个问题并解决了。 解决方案是将../放在要导入的样式表的路径之前，直到找到为止。看这里：

然后我多次添加../，直到我转至想要的目录并起作用为止

Answer 4

--relative-urls标志具有浏览器内对应标记。

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