LESS is not re-writing relative paths in url() when importing.

One trivial application of lessc is that it will concatenate several .less files into one .css file via the use of @import.

However, if one of the @imported files is in a subdirectory, and uses a url() to refer to an image in the subdirectory, the url() is not rewritten in the concatenated output.

For example, consider these files: a.jpg lib/b.jpg lib/bottom.less top.less

top.less looks like: @import “lib/bottom.less”;

.top_a { background-image: url("a.jpg");}
.top_b { background-image: url("lib/b.jpg");}

bottom.less looks like: .bottom_a { background-image: url(“…/a.jpg”);} .bottom_b { background-image: url(“b.jpg”);}

Actual output of less top.less: .bottom_a { background-image: url(“…/a.jpg”); } .bottom_b { background-image: url(“b.jpg”); } .top_a { background-image: url(“a.jpg”); } .top_b { background-image: url(“lib/b.jpg”); }

Problem is that .bottom_a and .bottom_b have url()s that don’t point correctly to their images.

Desired output:

.bottom_a {
  background-image: url("a.jpg");
}
.bottom_b {
  background-image: url("lib/b.jpg");
}
.top_a {
  background-image: url("a.jpg");
}
.top_b {
  background-image: url("lib/b.jpg");
}

[mendrik]

The whole path management seems to be one big pile of shit. My hate for this has grown to a raging fire that burns with the fierce passion of a million suns. Whenever I try to use subdirectories in @import, either the production build fails, the local server execution or the local file system. Why does this crap try to locate styles inside the build base directory? It should be always relative to the parent less file.

[lukeapage]

There is a lot of confusion here, but I think this is basically #331 - asking for node lessc to alter relative paths. will handle browser specific issues seperately.