Azure Web Project上的dotless无法理解&:extend

Question

我正在使用Azure SDK 2.2并创建了一个全新的MVC 5 Web项目.我添加了无点,无引导(随后从getbootstrap.com更新到最新的LESS),并且字体很棒.我已更新到最新的一切并解决了dotless在我的web.config文件中添加了一个部分并导致项目返回500内部服务器错误的问题.该配置已根据错误移至.

现在页面加载了,但是从少到CSS的bootstrap编译存在问题.这是我在访问bootstrap.less文件时看到的内容:

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

这是我的BundleConfig.cs文件所说的:

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

Font-Awesome和Site CSS一起显示得很好,但他们没有使用LESS.LESS代码直接来自http://getbootstrap.com的Bootstrap 3.1.1源代码,因此我不认为这是问题所在.

我也试过将Bootstrap分成它自己的包:

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"));

分离捆绑包引发了上面看到的相同异常,并在调试控制台中给出了此错误消息:

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

该行只是较少的bootstrap.less文件中的导入.

还有什么建议在哪里看？

Answer 1

无点的编译器已过时,因此无法编译最新的3.1.x引导程序.您可以返回使用bootstrap 3.0.x,也可以修改3.1.1代码以删除新 &:extend()语法.

这是一个&:extend()应该做的例子:

.classA {
    color: #000;
}

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

在这个例子中的属性CLASSA加到CLASSB通过将.classB选择器CLASSA的声明这导致下面的CSS:

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

.classB {
    font-weight: bold;
}

所以你可以在不&:extend()使用mixins的情况下实现几乎相同的效果:

.classA {
    color: #000;
}

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

这使:

.classA {
    color: #000;
}

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

所以处处&:extend()被引导3.1.1使用的(我认为大致有17个地方)更换&:extend(.className);或&:extend(.className all);用.className;,只是要尽可能接近到的行为&:extend(),发生.className;在块的顶部.这是因为&:extend()在当前块之前添加属性,因此mixin应该在块中的其余属性之前.

因此,对于您提供的错误,&:extend(.clearfix all);变为.clearfix;并放置在该块的顶部.

在bootstrap 3.1的发行说明中,他们提到他们专门添加了&:extend(.clearfix all);以消除.clearfixmixin添加的重复css代码.

编辑:

另外,在捆绑bootstrap.less你正在使用的文件StyleBundle时,如果你debug="true"在web配置中,它可以很好地进行开发,因为它没有进行捆绑,但是StyleBundle当它在生产中创建捆绑包时,不知道将较少的文件编译成css (debug="false").

您需要安装System.Web.Optimization.Lessnuget包并使用LessBundle.