无法错误地导入带有URL的文件

Question

似乎LESS的URL导入策略没有考虑与CSS相同的相对路径。

test.less

@import "sub/test.less";
div.a {
    background-image:url('imagea.jpg');
}

sub/test.less

div.b {
    background-image:url('imageb.jpg');
}

output.css

div.b {
    background-image:url('imageb.jpg');
}
div.a {
    background-image:url('imagea.jpg');
}

correct_output.css

div.b {
    background-image:url('sub/imageb.jpg');
}
div.a {
    background-image:url('imagea.jpg');
}

有没有办法从LessJS中获取此行为，或者这是实现中的错误？

Answer 1

这似乎是fixed here。正如usage下的详细非常详细说明，以下是如何应用此修复程序：

<script type="text/javascript">
    less = {
        relativeUrls: true
    };
</script>
<script src="less.js" type="text/javascript"></script>

很遗憾LESS没有这样做。您认为从CSS到LESS的向后兼容性（有效的CSS应该是有效的LESS）将是至关重要的。

Answer 2

解决方法：确保匹配目录层次结构。

~/root/lib/css/output.css
~/root/lib/less/test.less
~/root/images/imagea.jpg
~/root/images/imageb.jpg

将较少的文件输出到css目录。除了具有良好的目录结构外，css文件中的相对路径将匹配并正常工作。