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

Question

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

我有以下物理路径:

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

今天我解决了同样的问题。我找到了一个解决方案(也许不是最优雅的，但不需要您重写所有相对路径)。

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

在你的例子中它可能是这样的:

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 文件层次结构，我建议您重新组织您的解决方案，以便您可以轻松且合乎逻辑地对这些文件进行分组。

此外，我建议您将 bundle optimization 设置为 true

BundleTable.EnableOptimizations = true

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