css - 停止 Bundle Transformer 在 LESS 中转换相对路径

Question

我正在使用 Bundle Transformer用于 MVC5 元素中的 LESS 编译。我的 LESS 包包含一个 main.less 文件，该文件导入位于子文件夹中的其他文件。一些文件包含对图像文件的引用，就像这样 - 这在文件 /css/structure/header.less 中:

.site__logo {
    background: url('../img/logo.png') no-repeat;
    // ...
}

在编译包 (/css/lessBundle) 中变成:

background: url('/css/img/logo.png') no-repeat;

我希望在捆绑时保留 .less 文件中的相对路径，以便它正确指向 /img/logo.png，而不是 /css/img/logo .png。我认为 Bundle Transformer 负责转换相对路径 -- documentation有这一段，但没有进一步详细说明:

You also need to understand that when you plug instances of CssTransformer and JsTransformer classes, then you plug in a set of transformations (choice between debug and pre-minified versions of files, translation code from the intermediate languages, runtime code minification, transformation of relative paths to absolute (only for CSS-code) and code combining). A set of transformations depends on what the modules of Bundle Transformer you have installed and settings you have specified in the Web.config file.

这是我的 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)。