5

我正在使用 Azure SDK 2.2 并创建了一个全新的 MVC 5 Web 项目。我添加了 dotless、bootstrap-less（随后从 getbootstrap.com 更新到最新的 LESS）和 font-awesome。我已更新到最新的所有内容并解决了 dotless 在我的 web.config 文件中添加了一个部分并导致项目返回 500 内部服务器错误的问题。该配置已根据错误移至。

现在页面加载了，但是从 less 到 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"));

分离包会引发与上面相同的异常，并在调试控制台中显示以下错误消息：

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

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

关于其他地方的任何建议？

4

2 回答 2

10

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

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

.classA {
    color: #000;
}

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

在此示例中，通过将选择器添加到classA 的声明中，将classA的属性添加到classB ，这导致以下 css：.classB

.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()在 bootstrap 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时，当您在 Web 配置中使用该文件时，它将在开发中正常工作，debug="true"因为它不进行捆绑，但StyleBundle在生产中创建捆绑包时不知道将较少的文件编译为 css ( debug="false")。

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

于 2014-02-23T08:17:18.743 回答
0

此问题已被记录并正在积极处理中 https://github.com/dotless/dotless/issues/355

有一个解决方法也替换所有调用 &:extend(.clearfix all); 使用 .clearfix();

或者干脆回到 3.0

于 2014-07-03T19:10:42.147 回答