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

Question

我在 MVC 4 应用程序中遇到 CSS 路径问题。例如，当我在开发环境中时，指向 imgs 的路径工作正常。但是当应用程序发布后，路径不起作用，导致无效 URL。我使用捆绑包并且我的配置设置为发布，这意味着 "debug mode=off".

我有以下物理路径：

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('然后慢慢输入../到select路径，就可以了。

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 在调试和发布之间保持一致）。它有助于在发布到服务器之前发现 "relative paths" 错误。

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

Asp.Net MVC - CSS Relative Paths vs. Bundles

css

asp.net-mvc

asp.net-mvc-4

relative-path