LESS导入CSS和相对路径

我使用LESS来组织和导入我所有的CSS文件。我也使用了我的style.less中集成的Twitter Bootstrap。它可以像下面一样正常工作，但是当我使用lessc来缩小文件并将其压缩到一个地狱时，我的twitter引导程序css会崩溃。原因是我的bootstrap.min.css与图像的相对路径为"../img"，所以当我缩小所有这些文件并转储我的输出文件时，它不再找到此路径。LESS导入CSS和相对路径

究竟应该如何解决这个问题，我不想在我的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';

来源

2012-10-10 user391986

我推荐你使用'.htaccess'。 –

查看命令行使用的文档。 https://github.com/cloudhead/less.js/wiki/Command-Line-Usage。有一个选项叫做--root-path，它会预先加载现有的网址，以便它们可以在输出的css文件中工作。

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

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

例如：

这里是原来的URL，在CSS/src目录/窝文件

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

这是我如何处理决定当运行lessc使用--relative-urls标志的路径[link]

来源

2013-04-05 21:09:31

尝试使用相对路径，添加标志-ru或--relative-urls，它适用于我的情况（使用lessc 1.4.0）。 – user1

对。我提到过。此解决方法的全部原因是-ru选项不起作用 –

。

lessc --relative-urls

它记录不完整，但默认情况下它是假的，这意味着所有@imported文件将保持自己的网址（例如背景图像，字体面等），因为它们。这是因为更少的人已经这样做了，许多用户期望它离开他们的网站。

当使用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-04 21:31:29 Planky

-1

--relative-urls标志有它的浏览器对应。

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

来源

2017-01-27 09:21:02 sanmai

LESS导入CSS和相对路径

回答

相关问题