捆绑和缩小未呈现正确的路径答案

【问题标题】：Bundling and Minification not rendering correct path捆绑和缩小未呈现正确的路径
【发布时间】：2013-08-01 05:27:59
【问题描述】：

我在使用 ASP.NET MVC 4 的捆绑和缩小功能时遇到问题基本上我有以下捆绑设置：

        bundles.Add(new StyleBundle("~/backendcss").Include(
                    "~/backendContent/bootstrap/css/bootstrap.min.css",
                    "~/backendContent/assets/jui/css/jquery-ui.css",
                    "~/backendContent/assets/jui/jquery-ui.custom.css",
                    "~/backendContent/plugins/uniform/css/uniform.default.css",
                    "~/backendContent/plugins/fullcalendar/fullcalendar.css",
                    "~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
                    "~/backendContent/assets/css/fonts/icomoon/style.css",
                    "~/backendContent/assets/css/main-style.css",
                    "~/backendContent/plugins/pnotify/jquery.pnotify.css",
                    "~/backendContent/plugins/msgbox/jquery.msgbox.css",
                    "~/backendContent/IntroJS/css/introjs.css"));

当它们被放置在页面上时，它们会像这样出现：

<link href="/backendContent/assets/jui/css/jquery-ui.css" rel="stylesheet"/>
<link href="/backendContent/assets/jui/jquery-ui.custom.css" rel="stylesheet"/>
<link href="/backendContent/plugins/uniform/css/uniform.default.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.css" rel="stylesheet"/>
<link href="/backendContent/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/fonts/icomoon/style.css" rel="stylesheet"/>
<link href="/backendContent/assets/css/main-style.css" rel="stylesheet"/>
<link href="/backendContent/plugins/pnotify/jquery.pnotify.css" rel="stylesheet"/>
<link href="/backendContent/plugins/msgbox/jquery.msgbox.css" rel="stylesheet"/>
<link href="/backendContent/IntroJS/css/introjs.css" rel="stylesheet"/>

第一个问题是 Tilda ~ 没有出现在链接的开头，我认为这是问题之一（网站无法正确呈现）现在所有上述 css 样式表都已解决，但有很多进口和相对网址（图像），我认为这些都搞砸了（没有捆绑，如果我只是指向~/backendContent/....，一切都很好
第二个问题是，当我设置 BundleTable.EnableOptimizations = true; 时，会出现更多问题，深入挖掘我会得到一个庞大的列表 (4368,1)：运行时错误 CSS1019：意外的令牌，找到“@import” (4368,9): 运行时错误 CSS1019: Unexpected token, found 'url("layout.css")'

我不知道这是否重要，但@Styles.Render("~/backendcss") 生成的缩小和渲染样式链接是：

 <link href="/backendcss?v=eMX6YcVB78xPWZV9Dw6seHqsT742J8_M1irfUC0IdaQ1" rel="stylesheet"/>

有什么想法吗？很抱歉，这是我第一次使用这个功能，而且这个网站有这么多的 css 和 js，它会节省很多带宽并加快整个网站的速度。再加上它简直太酷了（如果我能让它工作的话）！！！

【问题讨论】：

css文件的交叉检查顺序。并删除 .min 文件或重命名它。比检查不使用 BundleTable.EnableOptimizations = true;每个文件都来了吗？如果再次发生错误，请告诉我。
@kunjee 好的，所以在经过大量调试并返回源代码后，我发现没有EnableOptimizations = true，引导文件丢失了。修复.min 后，该网站呈现正常。但是，当我打开优化时，我仍然收到所有这些错误CSS1019
我将尝试将所有文件夹拆分成单独的包，但这不会有点违背捆绑的目的吗？
是的，确实如此...但是要找到根本原因，这是唯一的方法...在找到问题后再次合并。相信我，这不是因为捆绑。我已经为非常大的项目打包了足够多的文件，而且它的工作原理很吸引人。
如果您能找到文件，请更新问题，以便帮助解决此错误背后的问题。据我所见，css中一定有一些错误，不允许它捆绑。因此，当优化为 false 时，它只是在不检查的情况下提供服务，否则在尝试捆绑时会引发错误。甚至您可以检查输出日志以找出文件。

标签： asp.net-mvc asp.net-mvc-3 c#-4.0 asp.net-mvc-4 bundling-and-minification

【解决方案1】：

~ 不应该被渲染。这是 asp.net 中的一个特殊字符，表示the root of the application
我不知道您为什么在实际缩小时遇到问题，但如果没有源代码就很难诊断。
优化后的链接应如下所示。最后的 ?v=xxx 用于缓存清除，以便人们在您更改 css 文件时获得更新的 css。

【讨论】：

【解决方案2】：

我认为你需要在 global.asax 文件中添加缩小工作

BundleTable.EnableOptimizations = true;

您还可以尝试创建不同的组，例如将 jqueryui 与引导程序分开等等。

【讨论】：

【解决方案3】：

Darren Kopp 是对的“不应该渲染 ~。这是 asp.net 中的一个特殊字符，表示应用程序的根”..

并且不要使用“.min”，因为当您设置BundleTable.EnableOptimizations = true; 时，它将最小化您的文件。所以应该是这样的；

bundles.Add(new StyleBundle("~/backendcss").Include(
                    "~/backendContent/bootstrap/css/bootstrap.css",
                    "~/backendContent/assets/jui/css/jquery-ui.css",
                    "~/backendContent/assets/jui/jquery-ui.custom.css",
                    "~/backendContent/plugins/uniform/css/uniform.default.css",
                    "~/backendContent/plugins/fullcalendar/fullcalendar.css",
                    "~/backendContent/plugins/fullcalendar/fullcalendar.print.css",
                    "~/backendContent/assets/css/fonts/icomoon/style.css",
                    "~/backendContent/assets/css/main-style.css",
                    "~/backendContent/plugins/pnotify/jquery.pnotify.css",
                    "~/backendContent/plugins/msgbox/jquery.msgbox.css",
                    "~/backendContent/IntroJS/css/introjs.css"));

【讨论】：