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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With