CODEWITHSUNDEEP
asp.netcssdotless
Dan Davies Brackett
Dan Davies Brackett

Reputation: 10071

app-relative paths in url() in dotless

I have a bunch of .less files that contain image backgrounds:

.header {
    background-image:url(~/images/some_image.png);
}

In debug mode, these .less files are served directly, but in release mode they're served as a part of a bundle. The path depths between the bundle URL and the individual file URLs are not always the same, so I can't just use relative URLs.

The default options for the dotless nuget package do not parse app-relative paths. Is there an option to make it do the right thing?

Upvotes: 1

Views: 681

Answers (1)

recursive
recursive

Reputation: 86084

Edit: There is a potentially fatal flaw in this approach. The apppath.less file has to be in a certain location which isn't necessarily known, which creates a chicken-egg scenario. Still, it may be helpful to some extent.

One approach is to use an @import rule that declares a variable containing the app path like this:

@import "apppath.less"

If you can't use a .less extension, you should be able to use (less) to force .less interpretation.

@import (less) "apppath.ashx"

Instead of being a static file, apppath.less could simply use Response.Write to echo the application path, producing an output like this:

@app-path: "http://yourserver/app/path";

Then you'd use it like this:

.header {
    background-image:url("@{app-path}/images/some_image.png");
}

Upvotes: 2

Related Questions