LESS incorrectly importing files with URLs

Question

It seems that LESS' import strategy for URL doesn't account for relative paths the same as CSS does.

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

Is there a way to get this behavior from LessJS or is this a bug in the implementation?

Answer 1

This has been fixed here it seems. As detailed very briefly under usage, here's how to apply the fix:

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

It's quite concerning that LESS didn't do this already. You'd think that having backwards compatibility from CSS to LESS (valid CSS should be valid LESS) would be crucial.

Answer 2

Workaround: ensure matching directory hierarchy.

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

Have the less file output to the css directory. In addition to having good directory structure, the relative path in the css file will match up and work correctly.