LESS does not import files with URLs correctly

Question

It seems that the LESS strategy for importing URLs does not take into account relative paths similar to 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');
}

Is there a way to get this behavior from LessJS or is it an implementation error?

Answer 1

This has been fixed here . As described very much under usage , here is how to apply the fix:

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

It is completely relative that LESS has not done this already. You would think that having backward compatibility from CSS to LESS (valid CSS must be valid LESS) would be crucial.

Answer 2

Workaround: Ensure directory hierarchy is consistent.

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

css. css .