.net - Azure Web Project上的无点不理解＆:extend

我正在使用Azure SDK 2.2，并创建了一个全新的MVC 5 Web项目。我添加了无点，无 bootstrap (随后从getbootstrap.com更新为最新的LESS)和超棒的字体。我已更新至最新版本，并解决了无点添加到我的web.config文件中的部分并使项目返回500内部服务器错误的问题。该配置已根据错误转移到该位置。

现在页面已加载，但是引导编译从较少到CSS出现了问题。这是我进入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"));

分离捆绑软件会产生与上述相同的异常，并在Debug控制台中给出以下错误消息:

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

该行只是在less bootstrap.less文件中的导入。

关于其他地方还有什么建议吗？

最佳答案

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

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

.classA {
    color: #000;
}

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

在此示例中，通过将.classB选择器添加到classA的声明中，将classA的属性添加到classB，这将导致以下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;
}

因此在 bootstrap 3.1.1中到处都使用&:extend()(我认为大约有17个地方)，将&: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文件时，您使用的是StyleBundle，当您的Web配置中包含debug="true"时，它将在开发中正常工作，因为它不进行捆绑，但是StyleBundle在创建时将不知道将较少的文件编译为css生产中的捆绑包(debug="false")。

您需要安装System.Web.Optimization.Less nuget软件包，并改用LessBundle。

关于.net - Azure Web Project上的无点不理解＆:extend，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21940204/