Asp.Net MVC - CSS 相对路径与捆绑包

Question

我在 MVC 4 应用程序中遇到了 CSS 路径问题。例如，当我在开发环境中时，指向 imgs 的路径可以正常工作。但是当应用程序发布时，路径不起作用，导致 URL 无效。 我正在使用捆绑包，并且我的配置设置为发布，这意味着“调试模式=关闭”。

我有以下物理路径：

Content\admin\layout\css\themes
Content\admin\layout\img

在我的 CSS 中，我有几个图像映射如下：

background-image: url(../../img/sidebar_toggler_icon_darkblue.png);

映射到上面的“\img”路径。

在 Asp.net MVC 4 中进行正确路径映射的最佳选择是什么？ 看了很多资源，但是都是在css/js这个标签上说话的。 我的问题是 CSS 内部的路径。

编辑 1

我已经在 Chrome 中看到了使用“F12”生成的 URL。它确实指向：

MyServer/img/sidebar_inline_toggler_icon_darkblue.jpg

在本地运行时它指向：

localhost:50390/Content/admin/layout/img/sidebar_toggler_icon_darkblue.png

我知道重写所有 css 路径应该可行，但我怀疑这是正确的做法。我一定是错过了什么。

我的包配置为：

 bundles.Add(new StyleBundle("~/css").Include(
                                "~/Content/themes/base/jquery.ui.dialog.css",
                                "~/Content/themes/base/jquery.ui.theme.css",
                                "~/Content/global/plugins/font-awesome/css/font-awesome.css",
                                "~/Content/global/plugins/simple-line-icons/simple-line-icons.css",
                                "~/Content/global/plugins/bootstrap/css/bootstrap.css",
                                "~/Content/global/plugins/bootstrap-switch/css/bootstrap-switch.css",
                                "~/Content/global/css/components.css",
                                "~/Content/global/css/plugins.css",
                                "~/Content/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css",
                                "~/Content/admin/layout/css/layout.css",
                                "~/Content/admin/layout/css/themes/darkblue.css",
                                "~/Content/admin/layout/css/custom.css",
                                "~/Content/themes/base/jquery.ui.datepicker.css"
                                ));

已经看过这些链接，但找不到路：

CSS and Javascript relative path confusion in ASP.NET MVC

CSS/JS bundle in single file in mvc when publish with release option

ASP.NET MVC Relative Paths

Answer 1

您只需将图片添加到解决方案中，然后将图片从解决方案资源管理器中拖放到视图（aspx、cshtml）中即可查看路径。

我经常写：background-image: url(' 然后慢慢输入../ 选择路径，效果很好。

Answer 2

今天我解决了同样的问题。而且我找到了一个解决方案（可能不是最优雅的，但不需要你重写所有的相对路径）。

重点是将样式、脚本等分组到文件夹层次结构中具有相同深度的文件中。当您使用相对路径时，您必须确保您的包虚拟路径与其中包含的样式具有相同的深度。

在你的例子中可能是这样的：

bundles.Add(new StyleBundle("~/css/name1/name2/bundle").Include(
                           "~/Content/themes/base/jquery.ui.dialog.css",
                           "~/Content/themes/base/jquery.ui.theme.css",
                           "~/Content/themes/base/jquery.ui.datepicker.css",
                           "~/Content/global/css/components.css",
                           "~/Content/global/css/plugins.css"
                           ));

bundles.Add(new StyleBundle("~/css/name1/name2/name3/bundle").Include(
                           "~/Content/admin/layout/css/layout.css",
                           "~/Content/admin/layout/css/custom.css",
                           "~/Content/global/plugins/simple-line-icons/simple-line-icons.css"
                           ));

bundles.Add(new StyleBundle("~/css/name1/name2/name3/name4/bundle").Include(
                           "~/Content/global/plugins/font-awesome/css/font-awesome.css",
                           "~/Content/global/plugins/bootstrap/css/bootstrap.css",
                           "~/Content/global/plugins/bootstrap-switch/css/bootstrap-switch.css",
                           "~/Content/admin/layout/css/themes/darkblue.css"
                           ));

bundles.Add(new StyleBundle("~/css/name1/name2/name3/name4/name5/bundle").Include(
                           "~/Content/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"
                           ));

不幸的是，这看起来很糟糕。如果您能够更改 css 文件层次结构，我建议您重新组织您的解决方案，以便您可以轻松且合乎逻辑地对这些文件进行分组。

另外，我建议您将捆绑优化设置为 true

BundleTable.EnableOptimizations = true

即使您正在调试解决方案，这也会创建捆绑包（它会使您的输出 html 在调试和发布之间保持一致）。它有助于在发布到服务器之前找到“相对路径”错误。