dotless on Azure Web Project doesn't understand &:extend

Question

I'm using Azure SDK 2.2 and created a brand new MVC 5 web project. I added dotless, bootstrap-less (and subsequently updated to the latest LESS from getbootstrap.com), and font-awesome. I'm updated to the latest of everything and resolved the issue where dotless added a section to my web.config file and caused the project to return a 500 internal server error. That configuration has moved to according to the error.

Now the page loads, but there is an issue with the bootstrap compilation from less to CSS. Here is what I see when I go to the bootstrap.less file:

Expected '}' but found ':' on line 643 in file 'mixins.less':
[642]:   padding-right: (@grid-gutter-width / 2);
[643]:   &:extend(.clearfix all);
       --^
[644]: }

This is what my BundleConfig.cs file says:

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap/bootstrap.less",
    "~/Content/css/font-awesome.css",
    "~/Content/site.css"));

Font-Awesome shows up fine along with the Site CSS, but they're not using LESS. The LESS code is straight out of the Bootstrap 3.1.1 source off http://getbootstrap.com so I don't think that is the issue.

I've also tried separating the Bootstrap into its own bundle:

bundles.Add(new StyleBundle("~/bundles/bootstrap").Include(
    "~/Content/bootstrap/bootstrap.less"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/css/font-awesome.css",
                  "~/Content/site.css"));

Separating the bundle raises the same exception seen above and gives this error message in the Debug console:

Critical error was detected at line 2, column 10 in http://127.0.0.1/Content/bootstrap/bootstrap.less. SCRIPT1004: Expected ';'

That line is simply an import in the less bootstrap.less file.

Any suggestions on where else to look?

Answer 1

The dotless less compiler is out of date, so it can't compile the latest 3.1.x bootstrap. You can either go back to using bootstrap 3.0.x or you can modify the 3.1.1 code to remove the new &:extend() syntax.

Here is an example of what &:extend() is supposed to do:

.classA {
    color: #000;
}

.classB {
    &:extend(.classA);
    font-weight: bold;
}

In this example the properties of classA are added to classB by adding the .classB selector to classA's declaration which results in the following css:

.classA, .classB {
    color: #000;
}

.classB {
    font-weight: bold;
}

So you could achieve pretty much the same effect without using &:extend() by using mixins:

.classA {
    color: #000;
}

.classB {
    .classA;
    font-weight: bold;
}

which gives:

.classA {
    color: #000;
}

.classB {
    color: #000;
    font-weight: bold;
}

So everywhere &:extend() is used in bootstrap 3.1.1 (I think there are roughly 17 places) replace &:extend(.className); or &:extend(.className all); with .className;, and just to be as close as possible to the behavior of &:extend(), place .className; at the top of the block. This is because &:extend() adds the properties before the current block, so the mixin should come before the rest of the properties in the block.

So for the error you provided, &:extend(.clearfix all); becomes .clearfix; and is placed at the top of that block.

In the release notes for bootstrap 3.1 they mention that they specifically added &:extend(.clearfix all); to get rid of the duplicate css code the .clearfix mixin added.

Edit:

Also, when bundling your bootstrap.less file you are using StyleBundle which will work fine in development when you have debug="true" in your web config because it doesn't do the bundling, but StyleBundle won't know to compile the less file into css when it creates the bundle in production (debug="false").

You need to install the System.Web.Optimization.Less nuget package and use LessBundle instead.