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

Wuhan

have you found a solution to this? – Ache

Unfortunately, I never did. I devoted more time to it than I thought wise, and moved on. Having no resolution to the issue, I have not used less in my last few projects. It just hasn't seemed to be a viable option for my needs. – Wuhan

Answer 1

This solution is working for me:

I have two NuGet packages:
- dotless
- dotless adapter for system.web.optimization

In my web.config, I have these 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 for 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 finally, Site.less:

/* I have to redefine some bootstrap mixins and variables,
   so importing bootstrap and extending happens here: */
@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 the Content folder. bootstrap-extends holds all needed @import directives, which are usually listed in ~/Content/bootstrap/bootstrap.less.

Mckinney

Answer 2

Have you looked into the LESS bundle transformer?

Cloudland