Dotless - Can't reference less variable in separate file with MVC Bundling

Question

I hope I'm not creating a duplicate topic, but I've been searching for two days and can't find a solution to this.

We are starting a new project in MVC4 and we have the less version of bootstrap loaded. The issue I'm running into is when I try to reference some classes or variables in the bootstrap.less, my global.less, or any thing outside the current file. I can create a variable in the top of the current file and use it just fine, but if I want to use something out of a separate file, I have to @import it. This would be fine if my entire app's less was in one file, but I'd have to @import 4+ files into each page/section less file I create.

I added the MVC4 bundling addition from https://gist.github.com/2002958

The issue, as I am seeing it, is that each file is evaluated and converted to css independently. I tried to simplify the process and build a massive less string from all of the files in the less bundle and then convert them (Less.Parse(lessString)), but I'm getting the error:

"You are importing a file ending in .less that cannot be found"

So here's my ultimate question: Is there a way to simply parse a less string without there being a physical file referenced? That would resolve my issue.

If that's not possible for some odd reason, is there a component or process already in place that I don't know about that actually bundles the files together before minifying them?

Any light on this subject would be appreciated as I am spinning in circles trying to get this to work.

This question was also posted in the Dotless group:
https://groups.google.com/forum/?fromgroups#!topic/dotless/j-8OP1dNjUY

Answer 1

this sollution is working for me:
i have two nuget packages:
• dotless
• dotless adapter for system.web.optimization

in web.config i have this lines

<configuration>
    <configSections>
        <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" />
    </configSections>
    <system.web>
        <httpHandlers>
            <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" />
        </httpHandlers>
    </system.web>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <handlers>
            <add name="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" />
        </handlers>
    </system.webServer>
    <dotless minifyCss="true" cache="true" web="false" disableParameters="true" />
</configuration>

note that you should define dotless params by your needs.

in BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new LessBundle("~/bundles/styles/").Include(
        "~/Content/site.less"
    ));
    BundleTable.EnableOptimizations = True; //false if you want to debug css
}

and finaly Site.less

/*i have to redefine some bootstrap mixin and variables, so importing bootstrap and extending happings there*/
@import "bootstrap-extends.less";

/* all other needed less should be included here too
   for example:
   @import "admin.less";
   @import "controls.less";
   etc
*/

body{

}

site.less and bootstrap-extends.less are inside Content folder.
bootstrap-extends holds all needed @import directives which are usualy listed in ~/Content/bootstrap/bootstrap.less

i hope this helps

Answer 2

Have you looked into the LESS bundle transformer?