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?

回答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.

回答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.

来源：https://stackoverflow.com/questions/9640080/less-incorrectly-importing-files-with-urls

标签

css

url

import

less