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 */

我知道编译器正在尝试最小化css文件，但是没有这样做。我试图纠正这些错误，但在纠正其中一些并再次发布后，错误看起来是一样的，就像没有选择我的更改。

甚至最奇怪的是bootstrap.css文件，我为了网站的目的稍作修改。当我发布它时，更改不在bundle文件中。是否有可能从Bootstrap服务器广告而不是我的项目加载引导程序？

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

我也尝试过自己使用网络应用程序进行缩小，但我的更改不可见，文件看起来没有缩小。

感谢任何帮助

Answer 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"));

enter image description here

Answer 2

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

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

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

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

Answer 3

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

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

另请参阅this帖子，了解如何解决Less @import目录。

Answer 4

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

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

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

Answer 5

缩小问题解决方案：

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

捆绑前应验证的无效CSS文件。这是W3C CSS validation service以达到这个目的。

另外考虑到Microsoft Optimizer读取缩小过程的目标资源内容，因此通过在JavaScript文件中使用@ sourceMappingURL=jquery.min.map等特殊短语或在样式表文件中使用@charset "UTF-8";，Minification将再次失败。因此，请尝试删除或评论它们。

注意默认情况下，捆绑进程无法在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()));

Answer 6

遇到这个，我在主要的css文件中的bundle-list中有引导程序，我再次导入了bootstrap.min.css。所以Bootstrap被要求两次。删除主css文件中的导入行解决了这个问题。

Answer 7

@import不适用于捆绑缩小。

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

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

并在布局中设置：

@Styles.Render("~/skin")

但是只允许应用程序相对URL（〜/ url）。

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 {

那解决了我所有的错误。

希望有帮助

Answer 9

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

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

Answer 10

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

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

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

Answer 11

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

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

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

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

或将CSS的非压缩版本添加到捆绑软件中。

Answer 12

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

在部署之前，请在web.config上删除debug =“ true”，然后尝试在本地计算机上运行代码，这应该使您了解哪些文件没有被加载并导致捆绑软件无法工作。

缩小失败。返回未经授权的内容

12 个答案: