CODEWITHSUNDEEP
cssurlimportless
Kendall Hopkins
Kendall Hopkins

Reputation: 44104

LESS incorrectly importing files with URLs

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?

Upvotes: 5

Views: 1443

Answers (2)

Aram Kocharyan
Aram Kocharyan

Reputation: 20431

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.

Upvotes: 4

user1108579
user1108579

Reputation: 2063

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.

Upvotes: 1

Related Questions