Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

LESS incorrectly importing files with URLs

Tags:

import

css

url

less

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?

like image 991
Kendall Hopkins Avatar asked Mar 09 '12 19:03

Kendall Hopkins


2 Answers

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.

like image 136
Aram Kocharyan Avatar answered Nov 01 '22 20:11

Aram Kocharyan


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.

like image 1
gmeben Avatar answered Nov 01 '22 18:11

gmeben