How do I path relative CSS paths correctly when using Visual Studio 2012 Bundling? [duplicate]

Question

I have an MVC 3 / .NET 4.0 application running on Visual Studio 2012.

I just created a static bundle for all my JS and CSS files.

It first squawked at me for using paths without "~/" at the beginning, but I need to include files that are in another virtual directory on my server, so I used /../ to get them.

My bundle looks like this:

Bundle css = new Bundle("~/MyCSS", typeof(CssMinify));
css.AddFile("~/Content/css/Site.min.css");   
css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");   
BundleTable.Bundles.Add(css);

I'm trying to include font-awesome. It finds the CSS file just fine, but none of the fonts and icons are coming in. I'm guessing it is lines like this that cause the problem:

src: url('../font/fontawesome-webfont.eot');  /* From Font-Awesome */

Any thoughts on how to fix this? Thanks!

EDIT: More information:

When looking at the request for a relative CSS path, it goes after the root of my server:

http://localhost/font/fontawesome-webfont.woff

Instead of

http://localhost/CommonWeb/css/fontawesome/font/fontawesome-webfont.woff

Schoolhouse

Did you ever get the bundled CSS to find the .EOT or .WOFF font files? I'm not able to. – Turcotte

No, unfortunately. I just continued to link directly to the file outside of the bundle. – Schoolhouse

@Schoolhouse Have you seen this answer? Worked for me. Get the virtual bundle path to imitate the physical CSS path. #12577608 – Hoye

Found a solution to this problem on this question – Callery

Answer 1

CSS is parsed by the browser. URL's within CSS are relative to the CSS file's location. Not to the HTML page.

So just check where your fonts are uploaded, and they should work fine.

Outsert

I added more information to show what's going on. The files are all in the right place, and when un-bundled, it works fine. – Schoolhouse

Where is the location of you CSS file? And where is the location of the font? – Outsert

CSS and fonts are in a neighboring CSS directory. It looks like the Bundle is making the CSS file think it's at "~/MyCSS" so it is looking for the fonts folder at ../Fonts, which in this case is the root... I'm guessing this won't work unless the bundler learns to pull in any linked files, too. – Schoolhouse

I mean the actual location in the resulting HTML file. (View source.) – Outsert

The bundled file is linked to with the following: <link href="MyCSS" rel="stylesheet"> based on the bundle definition I showed above. If you don't see a way to get the images recognized easily when bundled, it's ok. I will just keep CSS files with peripheral files out of the bundle. – Schoolhouse

That's the problem... The bundled CSS isn't at the location of the original CSS files, therefore invalidating the urls. I recommend not bundling them, and the problem should be resolved. – Outsert

Another option would be to create a bundle in the CommonWeb app, and reference that. – Trimolecular

@Aidiakapi, agreed. That's the route I'm taking. – Schoolhouse

Answer 2

This would be going to the directory above the relative root of the web application:

css.AddFile("~/../CommonWeb/css/fontawesome/css/font-awesome.css");

Instead of doing this, copy that CSS file in a post build event for the project it exists in to the Content/css directory of the MVC project, using the macro syntax to make the COPY command easier. You can find that syntax here. Visual Studio also provides a mechanism for expanding the dialog and giving you assistance because it shows the actual path.

Finally, change the bundle to use:

css.AddFile("~/Content/css/font-awesome.css");

Spanner

It finds the CSS file fine. I was trying to avoid copying the file to my project, as these are common files that are updated every so often. Even with a post build event, I can't just swap in a new version of the CSS without having to copy it to the other project's Content folder. For now I've just left it out of my bundle and linked it directly. – Schoolhouse

Answer 3

This SO post has a useful solution to this issue, and it appears to have been written by someone who actually works for Microsoft on the ASP.net Bundle code. (And weirdly, who edited this question, but didn't post an answer!)

The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.

We have rebasing urls in css on our todo list, but for now, the easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:

new StyleBundle("~/Static/Css/bootstrap/bundle")

Update: We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.

bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));

---

This fixed my issue with getting 404 errors on Font Awesome icons, on the production server, due to the relative paths not being used correctly.

bundles.Add(new StyleBundle("~/Content/font-awesome/css/bundle").Include(
      "~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));

Moonshot

Answer 4

I had this issue with Django, If you are willing to use CDN you won't face this issue.

Just add this

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

src: url('../font') part will be resolved winthin the level of CDN than your server.

Bumpkin

Answer 5

I was bundling little differently than yours, but the your edit on CSS relative path painfully looks like the same problem.This is how I was bundling.

 bundle.Add(new StyleBundle("~/Content/css").Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

new CssReWriteUrlTransform() was transforming @font-face at css src: url('../fonts/fontawesome') to src: url('/fonts/fontawesome')

I took out new CssReWriteUrlTransform() and fonts were loading fine.

Also, make sure the fonts paths are relative to CSS file. If you are hosting in II8, make sure you have added .woff2 and .woff MIME type.

Noteworthy