Stop Bundle Transformer在LESS中转换相对路径

Question

我正在使用Bundle Transformer在MVC5项目中进行少量编译.My 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).还有什么我可以做的吗？

Answer 1

在BundleTransformer.Less和BundleTransformer.SassAndScss模块中，无法禁用相对路径到绝对路径的转换，因为它可能会在使用@import指令时破坏对图像的引用。

要获取/img/logo.png而不是/css/img/logo.png您只需要在源代码中正确指定相对路径（../../img/logo.png而不是../img/logo.png）。