I am currently utilizing Bundle Transformer for compiling LESS in an MVC5 project. The main.less file in my LESS bundle imports other files from subfolders, some of which reference image files like this example found in /css/structure/header.less:
.site__logo {
background: url('../img/logo.png') no-repeat;
// ...
}
After compilation, the path changes in the bundled file (/css/lessBundle) to:
background: url('/css/img/logo.png') no-repeat;
I want to maintain the relative path in the .less file so that it correctly points to /img/logo.png, not /css/img/logo.png. I believe Bundle Transformer handles the conversion of relative paths based on the documentation snippet provided here, although lacking further explanation:
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.
Below is my 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 mainly consists of import statements:
@import "bootstrap/bootstrap";
@import "structure/header";
// etc.
html, body {
height: 100%;
}
I've attempted adjusting the setting in web.config but haven't seen any impact:
<css defaultMinifier="NullMinifier" disableNativeCssRelativePathTransformation="true">
If feasible, I prefer not to modify the filepaths in the .less files as they are third-party provided and aren't causing issues on their integration server (which does not use .NET). Is there any alternative solution available?