20

我正在使用 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';
4

4 回答 4

16

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

lessc --relative-urls

它的文档记录很差，但默认情况下它是 false ，这意味着所有 @imported 文件都将保持它们的 url（例如背景图像、字体等）。这是因为 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");
于 2014-06-04T21:31:29.643 回答
3

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

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

于 2013-04-05T21:09:31.130 回答
1

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

在此处输入图像描述

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

在此处输入图像描述

于 2020-11-19T09:32:34.920 回答
0

--relative-urlsflag 有其在浏览器中的对应物。

<script>
less = {
    env: "development",
    relativeUrls: true
};
</script>
<script src="less.min.js"></script>
于 2017-01-27T09:21:02.793 回答