Question

我在MVC 4应用程序中遇到CSS路径问题。例如，当我在开发环境中时，指向imgs的Paths工作正常。但是，当应用程序发布后，路径不起作用，导致URL无效。我正在使用bundle并且我的配置设置为publish，这意味着“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”生成的网址。它确实指向：

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在debuging和发布之间保持一致）。它有助于找到相对路径＆＃34;发布到服务器之前的错误。

Answer 2

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

我经常写：background-image: url('然后慢慢输入../来选择路径，它运行正常。

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

2 个答案: