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
– Jon P, Commented May 26, 2015 at 0:04

Sebastian Budka · Accepted Answer · 2016-07-01 12:38:57Z

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 ;]

Noob From Mars · Accepted Answer · 2015-05-26 00:15:07Z

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, 2015 at 0:15

answered May 25, 2015 at 23:57

Noob From Mars

791 silver badge10 bronze badges

2 Comments

Alan Araya Over a year ago

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

Noob From Mars Over a year ago

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.

Collectives™ on Stack Overflow

Asp.Net MVC - CSS Relative Paths vs. Bundles

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related