Asp.Net MVC - CSS Relative Paths vs. Bundles

Question

I´m getting trouble with CSS paths in a MVC 4 application. When I´m in the development environment the Paths that points to imgs, for example, works fine. But when the app have been published the paths doesn´t work, leading to invalid URL. I´m using bundles and my config is set to publish, which means "debug mode=off".

I have the following physical Path:

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

And in my CSS I have several images mapped like:

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

Which maps to the "\img" path above.

What is the best option in Asp.net MVC 4 to do the correct Path mapping? I have seen a lot of resources, but they all speak on the tag of css/js. My problem, is with the paths inside CSS.

EDIT 1

I have already seen the URL generated with "F12" in Chrome. It does point to:

MyServer/img/sidebar_inline_toggler_icon_darkblue.jpg

while running local it points to:

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

I´m aware that re-writing all css paths should work, but i doubt thats the right to do. I must be missing something.

My bundle is configured as:

 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"
                                ));

Have already seen those links, but couldn't find the way:

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

Today I approach the same problem. And I found a solution (maybe not the most elegant one, but does not require you to rewrite all relative paths).

The whole point is to group styles, scripts, etc. into files with the same depth in folder hierarchy. When you use relative paths, you have to ensure that your bundle virtual path has the same depth as styles included in it.

On your example it could be something like this:

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"
                           ));

Unfortunately this looks awful. If you are able to change css files hierarchy I would suggest you to reorganize your solution, so you can easly and logicaly group these files.

Also, I would suggest you to set bundle optimization to true

BundleTable.EnableOptimizations = true

This will create bundles even if you are debuging your solution (it will make your output html consistent between debuging and publishing). It helps to find "relative paths" error before publishing to server.

Answer 2

You simply should add your image to your solution, then drag your image from Solution Explorer and drop it into View (aspx, cshtml) to see the path.

I often write: background-image: url(' then slowly type ../ to select the path, and it works fine.