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

Paths in CSS are relative to the CSS document. So check there for a start. Check the published result with a tool like Chrome Developer Tools (f12) to make sure the paths are what you expect. Finally, if practical use root relative paths `/Content/admin/layout/img/sidebar_toggler_icon_darkblue.png` if possible (i.e. both your dev and production environments resolve to `http://asiteroot.com/Content/admin/layout/img/sidebar_toggler_icon_darkblue.png` — Jon P, May 26 '15 at 00:04

score 1 · Accepted Answer · answered Jul 01 '16 at 12:38

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.

I used the same solution in the time I asked the question. As you said, this solution just forces you to write groups of bundles. Thanks for sharing the knowladge anyway ;] — Alan Araya, Jul 04 '16 at 21:12

Noob From Mars · Answer 2 · 2015-05-26T00:15:07.213

0

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.

edited May 26 '15 at 00:15

answered May 25 '15 at 23:57

Noob From Mars

79
1
9

But that means I would have to rewrite all my css files? Witch work very fine on dev mode..Looks like a pettry hard solution – Alan Araya May 26 '15 at 00:04
Did you try to use F12 to see what was generated? If your IDE is Visual Studio, try to write: background-image: url( Then type slowly: ../../ If there is nothing map this path, you will see nothing displayed. – Noob From Mars May 26 '15 at 00:11

Asp.Net MVC - CSS Relative Paths vs. Bundles

2 Answers2