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;
}

所以你可以通过使用mixins来实现几乎相同的效果而不使用&:extend()：

.classA {
    color: #000;
}

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

给出：

.classA {
    color: #000;
}

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

所以在引导程序3.1.1（我认为大约有17个地方）中使用&:extend()，&:extend(.className);或&:extend(.className all);替换为.className;，只是为了尽可能接近&:extend()的行为，将.className;放在块的顶部。这是因为&:extend()在当前块之前添加了属性，因此mixin应该位于块中其余属性之前。

因此，对于您提供的错误，&:extend(.clearfix all);变为.clearfix;并位于该块的顶部。

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

修改：

此外，捆绑您正在使用bootstrap.less的{{1}}文件时，如果您的网络配置中有StyleBundle因为它没有进行捆绑，那么它在开发中可以正常工作，但是debug="true"在生产（StyleBundle）中创建包时，不会知道将较少的文件编译成css。

您需要安装debug="false" nuget包并使用System.Web.Optimization.Less代替。

Answer 2

此问题已被记录并正在积极开展工作 https://github.com/dotless/dotless/issues/355

还有一种解决方法将所有调用替换为＆amp;：extend（.clearfix all）;与.clearfix（）;

或简单地回到3.0

Azure Web Project上的dotless无法理解＆amp;：extend

2 个答案: