LESS 导入 CSS 和相对路径

Question

我正在使用 LESS 来组织和导入我的所有 CSS 文件。我也在使用 Twitter Bootstrap，它集成在我的 style.less 中。它可以像下面一样正常工作，但是当我使用 lessc 来缩小 less 文件并将其压缩到我的 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

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

然后我多次添加../，直到我逃到想要的目录并且它起作用了

Answer 2

--relative-urls 标志在浏览器中对应。

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

Answer 3

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

lessc --relative-urls

它的文档记录很差，但默认情况下它是 false，这意味着所有 @imported 文件都将保持它们的 url（例如 background-image、font-face 等）原样。这是因为 less 已经在这样做了，许多用户希望它不理会他们的网址。

当使用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 4

查看文档以了解命令行用法。 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]的方式