无点中 url() 中的应用程序相对路径

【问题标题】：app-relative paths in url() in dotless无点中 url() 中的应用程序相对路径
【发布时间】：2013-11-27 07:59:42
【问题描述】：

我有一堆包含图像背景的 .less 文件：

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

在调试模式下，这些 .less 文件直接提供，但在发布模式下，它们作为捆绑包的一部分提供。捆绑 URL 和单个文件 URL 之间的路径深度并不总是相同，所以我不能只使用相对 URL。

dotless nuget 包的默认选项不解析应用程序相对路径。有没有办法让它做正确的事？

【问题讨论】：

【解决方案1】：

编辑：这种方法存在潜在的致命缺陷。 apppath.less 文件必须位于不一定已知的特定位置，这会创建一个鸡蛋场景。不过，它在某种程度上可能会有所帮助。

一种方法是使用@import 规则声明一个包含应用程序路径的变量，如下所示：

@import "apppath.less"

如果您不能使用 .less 扩展名，您应该可以使用 (less) 强制 .less 解释。

@import (less) "apppath.ashx"

apppath.less 可以简单地使用 Response.Write 来回显应用程序路径，而不是静态文件，从而产生如下输出：

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

然后你会这样使用它：

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

【讨论】：