Search code examples
asp.net-mvclessweb-essentials

How to parameterize a less file using Web Essentials?

I have a big legacy CSS file I want to translate to LESS - not a big deal in itself, but it references a hard-coded domain for images. It was a pain in plain css but we managed to handle this a dirty way during development phases; and I thought I could "parameterize" this url using LESS depending on our configuration (development, integration, production) - something like:

#if DEBUG 
    @import 'debug'
#elseif INTEGRATION
    @import 'integration'
#elseif PROD
    @import 'production'
#endif

Is what I want to achieve even possible ?

I am using MVC .Net 5 and Web Essentials 2013.

Solution

  • Well, I actually found a solution: using a pre-build event which copy a specific file to a file referenced by the main .less file.

    So, in the main.less :

    @import (optional) "_Variables"; ...some code...

    In the _Variables.less, which is a kind of filler so the main.less find every variables with default values : @myVar = "someDefaultValue";

    In the _VariablesDebug.less : @myVar = "debugValue";

    In the _VariablesRelease.less : @myVar = "releaseValue";

    And so on, each configuration having its own file named _Variables{Configuration}.less, all of them having the correct values for each variables.

    Finally, in the pre-build event:

    xcopy "$(ProjectDir)Path\To\Less\Files\_Variables$(ConfigurationName).less" "$(ProjectDir)Path\To\Less\Files\_Variables.less" /Y

    At each compilation, the file _Variables.less is replaced by the file needed by the configuration, and the main.less is compiled with the correct values.