无点的Azure上的Web项目不理解和放大器;:延长放大器、不理解、项目、Azure

2023-09-05 23:16:21 作者:故事很短路很长

我使用的Azure SDK 2.2,创造了一个全新的MVC 5 Web项目。我加了无点,引导少(随后更新到最新减去getbootstrap.com),和字体真棒。我更新到最新的一切,并解决在无点增加了一节,以我的web.config文件,造成该项目返回一个500内部服务器错误的问题。该配置已经移动到根据误差

现在在页面加载,但有一个问题,引导编辑从少到CSS。这是我看到的时候我去了bootstrap.less文件:

 预计}却发现:在文件'mixins.less'行643:
[642]:填充右:(@网沟宽/ 2);
[643]:放大器;:延长(.clearfix全部);
        -  ^
[644]:}
 

这是我的BundleConfig.cs文件说:

  bundles.Add(新StyleBundle(〜/内容/ CSS)。包括(
    〜/内容/引导/ bootstrap.less
    〜/内容/ CSS / FONT-awesome.css
    〜/内容/ site.css));
 
Azure Storage 系列 二 .NET Core Web 项目中操作 Blob 存储

字体 - 真棒显示的罚款随着网站的CSS,但他们没有少用。少code是直出引导3.1.1源关 http://getbootstrap.com 所以我不我不觉得是问题。

我也试着分离引导到它自己的包:

  bundles.Add(新StyleBundle(〜/包/引导)。包括(
    〜/内容/引导/ bootstrap.less));

bundles.Add(新StyleBundle(〜/内容/ CSS)。包括(
    〜/内容/ CSS / FONT-awesome.css
                  〜/内容/ site.css));
 

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

 第2行中检测到严重错误,列10 http://127.0.0.1/Content/bootstrap/bootstrap.less。 SCRIPT1004:预期';'
 

这行简直是在较bootstrap.less文件导入。

在别的地方看看有什么建议?

解决方案

该带点少编译器是过时的,因此它无法编译最新的3.1.x的引导。你可以回去使用引导3.0.x的,也可以修改3.1.1 code,除去新&功放;:延长()语法

下面是什么&放一个例子:延长()应该做的事:

  .classA {
    颜色:#000;
}

.classB {
    &功放;:延长(.classA);
    字体重量:大胆的;
}
 

在本实施例的特性的 CLASSA 的是通过添加 .classB 选择器的 CLASSA的的声明,这导致了下面的CSS:

  .classA,.classB {
    颜色:#000;
}

.classB {
    字体重量:大胆的;
}
 

所以,你可以达到pretty的多少,而无需使用&放同样的效果;:延长()通过混入:

  .classA {
    颜色:#000;
}

.classB {
    .classA;
    字体重量:大胆的;
}
 

这给:

  .classA {
    颜色:#000;
}

.classB {
    颜色:#000;
    字体重量:大胆的;
}
 

所以到处&功放;:延长()用于引导3.1.1(我认为大致有17个地方)替换&放;:扩展(.className); &功放;:延长(.className全部); .className; ,只是要尽可能接近的&放的行为;:延长(),地方 .className; 在块的顶部。这是因为&功放;:延长()当前块前增加的属性,所以混入应该来的属性块中的其余部分之前

因此​​,对于您提供的错误,&功放;:延长(.clearfix全部); 变成 .clearfix; 和放置在该块的顶

在自举3.1的发行说明他们提到,他们特意加入&功放;:延长(.clearfix全部); 来摆脱重复的CSS code在 .clearfix 混入补充说。

编辑: 此外,捆绑,当你的 bootstrap.less 您使用文件 StyleBundle 这将很好地工作在发展时,你有调试=真正的在你的web配置,因为它没有做捆绑销售,但 StyleBundle 不知道编译少文件到CSS时,它会在生产的包(调试=假)。

您需要安装 System.Web.Optimization.Less 的NuGet包,并使用 LessBundle 代替。

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?

解决方案

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.