压缩失败。返回未压缩的内容。

Question

我用 MVC 5 制作了我的第一个网站，在本地机器上运行正常，但是当我将其发布到服务器时，部分 CSS 没有正确压缩。

    /* Minification failed. Returning unminified contents.
    (80,1): run-time error CSS1019: Unexpected token, found '@import'
    (80,9): run-time error CSS1019: Unexpected token, found 'url('../Content/dark-skin/skin.css')'
    (671,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
    (1288,16): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':'
    (1680,1): run-time error CSS1019: Unexpected token, found '@keyframes'
    (1682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
    (1685,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
    (1687,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
     */
    /* NUGET: BEGIN LICENSE TEXT
     *
     * Microsoft grants you the right to use these script files for the sole
     * purpose of either: (i) interacting through your browser with the Microsoft
     * website or online service, subject to the applicable licensing or use
     * terms; or (ii) using the files as included with a Microsoft product subject
     * to that product's license terms. Microsoft reserves all other rights to the
     * files not expressly granted by Microsoft, whether by implication, estoppel
     * or otherwise. The notices and licenses below are for informational purposes only.
     *
     * NUGET: END LICENSE TEXT */
    /*!
     * Bootstrap v3.0.0
     *
     * Copyright 2013 Twitter, Inc
     * Licensed under the Apache License v2.0
     * http://www.apache.org/licenses/LICENSE-2.0
     *
     * Designed and built with all the love in the world by @mdo and @fat.
     *//*! normalize.css v2.1.0 | MIT License | git.io/normalize */

尝试改正一些错误并重新发布后，错误仍然相同。

最奇怪的是 bootstrap.css，我已经稍微修改了它以适应网站的需要。当我发布它时，更改不会出现在 bundle 文件中。这是否意味着 bootstrap 是从 Bootstrap 服务器加载而不是我的项目中加载的？

    bundles.Add(new StyleBundle("~/Content/cssmain").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/ilightbox.css",
                      "~/Content/bannerscollection_zoominout.css"));

我也尝试使用网络应用程序进行代码压缩，但我的更改没有生效，文件似乎也没有被压缩。

感谢任何帮助。

- Whistler

Answer 1

我解决了打包bootstrap.css的问题，具体做法如下：

1. 将bootstrap.css放在bundle中首位。问题中的代码样例已经实现了这一步骤，但我没有注意到。
2. 在项目中添加官方的压缩版本（bootstrap.min.css），并放在未压缩版本所在的同一目录下。这会提示打包器使用已有的压缩文件而不是试图（失败地）自行压缩bootstrap.css。如下方截图中的绿色箭头所示。

请注意，如果您正在使用特定的主题，请将bootstrap.css和bootstrap.min.css替换为主题提供的文件。以下是我项目中使用spacelab主题的可工作代码：

            bundles.Add(new StyleBundle(GetStyleBundlePath("bootstrap")).Include(
            "~/Content/3rdParty/bootstrap.spacelab.css",
            "~/Content/3rdParty/bootstrap-datepicker.css",
            "~/Content/3rdParty/bootstrap-multiselect.css"));

- trebormf

---

请注意，GetStyleBundlePath是我自己的方法，不是框架的一部分。您可以像提问者一样使用字符串。 - trebormf

我使用ScriptBundle来捆绑CSS，但出现了这个错误，请确保使用ScriptBundle来处理脚本和StyleBundle来处理CSS。 - Shaiju T

谢谢您告诉我，bundler 首先会尝试查找现有的压缩文件 :) - Abdul Rauf

如果您只是使用 '.IncludeDirectory("~/js/path", "*.js")，那么BundleConfig是否仍然知道要使用.min.js文件而不是直接的.js文件？ - user5986440

Answer 2

针对那些可能会遇到这篇文章的人... 您也可以通过将 @import 移动到第一个捆绑项目来解决此问题。

根据：http://webdesign.about.com/cs/css/qt/tipcssatimport.htm

@Import 必须始终是 CSS 文档中的第一个。当您将多个 CSS 文件捆绑在一起时，它们被链接成一个单独的捆绑 CSS 文件。由于我的捆绑配置中添加的第二个 CSS 文件以 @Import 开始，因此在将文件链接在一起时，@import 出现在新合并文档的中间。一旦我更改了捆绑顺序，问题就得到了解决。

这很重要，因为虽然您可以使用像 Bootstrap 这样的插件提供的压缩文件，但是在开发过程中对非压缩文件所做的任何更改都不会添加到现有的压缩 CSS 文件中。这意味着您必须进行两次更改，并浏览压缩文件。

- Elliott Quick

Answer 3

请确保你正在打包的这些.js文件中没有以//Some Comment结尾的文件。如果以双斜杠//注释结尾的文件附加到其他依赖文件上，它将被视为一个长注释，从而导致出现错误。我敢打赌你的某个.js文件末尾有一个//@Import。如果是这种情况，我认为你可以安全地将该行更改为/*@Import */。

此外，我不知道MVC5是否已经修复了这个问题，但在MVC4中，缩小解析器无法处理非标准的:-moz-any()和:-webkit-any() CSS标签。

还要查看此帖子，其中详细介绍了如何解决Less @import目录的问题。

- Ross Bush

---

谢谢你的回答。我的文件中没有以注释结尾，也没有这些标签在我的代码中。我在我的CSS文件中使用了@import，而不是JS。 - Whistler

那个缩小解析器确实会检查语法。我认为该js文件必须与解析器期望的有效js外观一致。 - Ross Bush

我已经将导入文件中的所有内容复制到我的主CSS中，并发布了，但仍然没有任何变化，CSS文件中仍然有@import，但我已经将其删除。为什么我的更改在服务器上没有更新？ - Whistler

你刚刚帮我避免了一个相当麻烦的事情。我使用PMC将我的jQuery版本更新到了1.11.3，如果我直接引用.js或者.min.js文件，则它们都可以正常工作。但是如果把它们放进一个bundle中就会出现"jQuery未定义"的错误。奇怪的是，这个问题在.min.js文件的最后一行有一句话：//# sourceMappingURL=jquery.min.map。删除了这一行就一切正常了。太奇怪了。 - MattD

刚刚得知我也可以通过将Web Optimization Framework的版本从1.0.0更新到1.1.3来解决这个问题（在我撰写此文时为最新版本）。然后在我的.min版本的jQuery中添加了注释掉的那一行，现在它可以正常工作了。 - MattD

Answer 4

我们遇到了同样的问题，原来是 bootstrap.css 引起的。我们也遇到了你上面提到的完全相同的缩小错误。捆绑程序在 css 文件中的 @import、@keyframes 和 @-webkit-keyframes 方面存在问题。

为了解决这个问题，我们从捆绑包中移除了 bootstrap.css，并直接引用它（或者如果你有它的缩小版本，则使用缩小版本）在 Shared/_Layout.cshtml 中。

@Styles.Render("~/Content/bootstrap.min.css")
@Styles.Render("~/Content/css")

- rikitikitik

Answer 5

缩小文件问题解决方案：

我知道两种可能导致优化问题：

应该在捆绑之前验证的无效CSS文件。这里是 W3C CSS验证服务，以满足此目的。

还要考虑Microsoft Optimizer读取目标资源的内容进行缩小处理，因此通过在JavaScript文件中使用一些特殊短语，例如@ sourceMappingURL=jquery.min.map，或在样式表文件中使用@charset "UTF-8";，将再次导致缩小失败。因此，请尝试删除或注释它们。

请注意，默认情况下，捆绑过程无法构建css或js文件中图像资源的相对路径。

相对图像路径解决方案：

您可以使用与捆绑路径相同的路径，例如：

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
       .Include("~/Content/css/jquery-ui/*.css"));

如果您在与构成bundle的源文件相同的路径上定义bundle，那么图像资源的相对路径仍然有效（即/bundle可以是任何名称）。

或者像这样使用new CssRewriteUrlTransform()作为第二个参数：

bundles.Add(new StyleBundle("~/Content/css/bundle")
    .Include("~/Content/css/*.css", new CssRewriteUrlTransform()));

- Amirhossein Mehrvarzi

Answer 6

我也遇到过这个问题。我的bundle列表中有Bootstrap和主CSS文件，其中我再次导入了bootstrap.min.css。因此Bootstrap被请求了两次。在我的主CSS文件中删除导入行解决了这个问题。

- 2mas

Answer 7

@import在捆绑压缩中不起作用。

请在文件 BundleConfig.cs 中进行如下设置：

bundles.UseCdn = true;
bundles.Add(new StyleBundle("~/skin", "../Content/dark-skin/skin.css"));

并将其设置在布局中：

@Styles.Render("~/skin")

但只允许使用应用程序相关的URL（~/url）。

- Sergio Cabral

Answer 8

我所做的是，在我的BundleConfig.vb（cs）中，我将所有通过@import引用的文件放在css文件中，就像这样：

bundles.Add(New StyleBundle("~/bundle/css-account") _
                .Include("~/Content/consola/bootstrap/css/bootstrap.css",
                         "~/Content/consola/plugins/node-waves/waves.css",
                         "~/Content/consola/plugins/animate-css/animate.css", //Referenced by @import
                         "~/Content/consola/plugins/bootstrap-select/css/bootstrap-select.css",
                         "~/Content/account/account.css",
                         "~/fonts/awesome/css/font-awesome.css",//Referenced by @import
                         "~/Content/consola/materialize.css", //Referenced by @import
                         "~/Content/consola/style.css"))

这几乎消除了所有错误。

接下来我做的是修改我的 CSS 文件，将 CSS 伪类语法从这个 [type="checkbox"]:not(.filled-in, .gm-menu-hamburger) + label:after { 改为这个 [type="checkbox"]:not(.filled-in) + label:after, [type="checkbox"]:not(.gm-menu-hamburger) + label:after {

这解决了我所有的错误。

希望这可以帮助到你。

- Roberto Osorio Mc Nulty

Answer 9

不确定其他人是否有同样的情况，但我在Bundle.config文件中所做的更改直到重新构建项目后才被采用。

我猜编译器将信息包含在已编译的DLL中，不再查看Bundle.config。

虽然我正在使用ASP.NET表单应用程序，但对于MVC我不确定。

- Archie

Answer 10

我的解决方案与@GraehamF相同，我遇到的问题是@imports试图加载css，在使用开发工具检查捆绑的css时，如果看到类似于“运行时错误”的内容，则表示文件未正确加载。

在部署之前，请从web.config中删除debug="true"，然后尝试在本地运行代码，这应该能让您知道哪些文件没有被加载并导致捆绑未起作用。

- Vazqusa