缩小失败。返回未缩小的内容答案

【问题标题】：Minification failed. Returning unminified contents缩小失败。返回未缩小的内容
【发布时间】：2014-08-15 05:36:49
【问题描述】：

我使用 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，为了网站的目的，我稍微修改了它。当我发布它时，更改不在捆绑文件中。是否有可能从 Bootstrap 服务器而不是我的项目加载引导程序？

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

我也尝试使用 Web 应用程序自己进行缩小，但我的更改不可见，并且文件似乎没有被缩小。

感谢任何帮助。

【问题讨论】：

标签： asp.net asp.net-mvc bundling-and-minification

【解决方案1】：

我通过做两件事解决了捆绑 bootstrap.css 的问题：

将 bootstrap.css first 包含在包中。问题中的代码示例已经这样做了，但我没有。
将官方缩小版（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"));

【讨论】：

请注意，GetStyleBundlePath 是我自己的方法，而不是框架的一部分。您可以像提问者一样使用字符串。
我使用 ScriptBundle 捆绑 CSS 并得到 this 错误，确保将 ScriptBundle 用于脚本，StyleBundle 用于 CSS
感谢您让我知道捆绑程序首先尝试查找现有的缩小文件 :)
如果您只是使用'.IncludeDirectory("~/js/path", "*.js")，BundleConfig 是否仍然知道使用 .min.js 文件而不是直接的 .js 文件？

【解决方案2】：

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

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

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

理解这一点很重要，因为尽管您可以使用插件（如引导程序）提供的缩小文件，但在开发期间对非缩小文件所做的任何更改都不会添加到现有的缩小 css 文件中。这意味着您将不得不进行两次更改，并在缩小的文件中导航。

【讨论】：

【解决方案3】：

确保您捆绑的所有 .js 文件都不以 //Some Comment 结尾。如果以双反斜杠 // 注释结尾的文件被附加到另一个依赖文件，它将被视为一个长注释，导致您看到的错误。我敢打赌，您的一个 .js 文件的末尾有一个 //@Import。如果是这种情况，我认为您可以安全地将该行更改为 /*@Import */

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

另请参阅 this 帖子，详细说明如何解析 Less @import 目录。

【讨论】：

感谢您的回答。我的所有文件都没有以注释结尾，我的代码中也没有任何这些标签。我在我的 css 文件中得到了 @import 而不是 js
那个缩小解析器会检查语法。我认为 js 文件必须与解析器期望有效 js 的样子一致。
但是我所有的 js 动画和功能都可以正常工作。我只看到我的网站样式有问题，所以问题在于 css 缩小
我添加了一个帖子的链接，该帖子处理的导入错误较少。
我已经复制了导入文件中的所有内容并复制到我的主 css 中，已发布，但没有任何变化，css 文件中仍有 @import，但我已将其删除。为什么我的更改没有在服务器上更新？

【解决方案4】：

我们遇到了同样的问题，结果证明 bootstrap.css 是问题所在。我们得到了与您在上面写的完全相同的缩小错误。捆绑器遇到了 css 文件中的 @import、@keyframes 和 @-webkit-keyframes 问题。

我们为解决这个问题所做的就是从包中删除 bootstrap.css 并在 Shared/_Layout.cshtml 中直接引用它（或缩小版本，如果你有的话）。

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

【讨论】：

【解决方案5】：

缩小问题解决方案：

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

捆绑前应验证的无效 CSS 文件。这里是W3C CSS validation service 来实现这个目的。

另外考虑到微软优化器会读取目标资源的内容进行压缩处理，所以通过在 JavaScript 文件中使用 @ sourceMappingURL=jquery.min.map 或在 styleSheet 文件中使用 @charset "UTF-8"; 等特殊短语，将再次进行压缩失败。因此，请尝试删除或评论它们。

注意默认情况下，Bundling 进程不能在 css 或 js 文件中构建图片资源的相对路径。

相对图像路径解决方案：

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

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

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

或使用new CssRewriteUrlTransform() 作为第二个参数，如：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

@import 不适用于压缩包。

执行此操作...在文件 BundleConfig.cs 中设置：

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

并在布局中设置：

@Styles.Render("~/skin")

但只允许应用相对 URL (~/url)。

【讨论】：

【解决方案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 {

这解决了我遇到的所有错误。

希望有帮助

【讨论】：

【解决方案9】：

对我来说，问题是我在 .css 文件中有 @import。

我将我的代码移动到相应的.less 文件中，该文件在构建时被编译，这为我解决了构建错误。使用 Gulp 编译。

【讨论】：

【解决方案10】：

不确定其他，但我在 Bundle.config 文件中所做的更改直到我重建项目才被采纳。

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

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

【讨论】：

【解决方案11】：

检查您的捆绑包中是否有任何缩小的 (...min.js) 文件。

    bundles.Add( ... minified files???
     ));

将它们从包中移除并呈现在 _layout.cshtml 文件中：

@Styles.Render("~/Content/fontawesome-free-5.10.1-web/css/all.min.css")

或者将你的 css 的非缩小版本添加到包中。

【讨论】：

【解决方案12】：

我的解决方案与@GraehamF 相同，我遇到了@imports 试图加载css 的问题，当您使用开发工具检查捆绑css 时，如果您看到类似“运行时错误”的信息，这意味着文件未正确加载。

在部署之前删除 web.config 上的 debug="true" 然后尝试在本地机器上运行代码，这应该让您了解哪些文件没有被加载并导致捆绑包不起作用。

【讨论】：