我在 MVC5 项目中使用Bundle Transformer进行 LESS 编译。我的 LESS 包包含一个 main.less 文件,该文件导入位于子文件夹中的其他文件。一些文件包含对图像文件的引用,如下所示 - 这是在文件中/css/structure/header.less
:
.site__logo {
background: url('../img/logo.png') no-repeat;
// ...
}
在已编译的 bundle ( /css/lessBundle
) 中,这变为:
background: url('/css/img/logo.png') no-repeat;
我希望在捆绑时保留 .less 文件中的相对路径,以便它正确指向/img/logo.png
,而不是/css/img/logo.png
。我认为 Bundle Transformer 负责转换相对路径——文档有这一段,但没有进一步详细说明:
您还需要了解,当您插入 CssTransformer 和 JsTransformer 类的实例时,您会插入一组转换(在文件的调试版本和预压缩版本之间进行选择、来自中间语言的翻译代码、运行时代码压缩、相关转换绝对路径(仅适用于 CSS 代码)和代码组合)。一组转换取决于您安装的 Bundle Transformer 模块以及您在 Web.config 文件中指定的设置。
这是我的BundleConfig:
public class BundleConfig
{
public const string LessBundlePath = "~/css/lessBundle";
public static void RegisterBundles(BundleCollection bundles)
{
var nullBuilder = new NullBuilder();
var cssTransformer = new CssTransformer();
var nullOrderer = new NullOrderer();
// Skip JS-related stuff
var lessBundle = new Bundle(LessBundlePath)
.Include("~/css/main.less");
lessBundle.Builder = nullBuilder;
lessBundle.Transforms.Add(cssTransformer);
lessBundle.Orderer = nullOrderer;
bundles.Add(lessBundle);
BundleTable.EnableOptimizations = true;
}
}
/css/main.less
主要是一堆进口:
@import "bootstrap/bootstrap";
@import "structure/header";
// etc.
html, body {
height: 100%;
}
我曾尝试在 web.config 中使用此设置,但没有效果:
<css defaultMinifier="NullMinifier" disableNativeCssRelativePathTransformation="true">
如果可能的话,我宁愿不更改 .less 文件中的文件路径,因为它们是由第三方提供的,并且在他们的集成服务器(不使用 .NET)上一切正常。还有什么我可以做的吗?