Broken CSS Link When Published in Visual Studio 2017

Question

I have problem when publishing a Visual Studio 2017, C#, ASP.Net MVC 5 project. I do publish with following settings :

Problem with the CSS content link, for example bootstrap :

@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);

If the bootstrap.min.css located in localhost/bower_components/css/bootstraps/bootstrap.min.css, that css will displayed as localhost/fonts/glyphicons-halflings-regular.eot at client.

If I just copy paste all project without publish it to the server, the link will displayed correctly as localhost/bower_components/css/fonts/glyphicons-halflings-regular.eot

This is happens for all css including images and other file in css.

Answer 1

With what is available of code knowledge in your question and what shown and explained. I can see in your code your relative path has the issue.

You are using ../ change it to ./ or ~/. That should fix the issue.

By using ../ you are stepping the css path over.

Answer 2

In the {YourProjectName}\App_Start\BundleConfig.Cs

Add Instance of CssRewriteUrlTransform Class when adding Bootstrap Bundle Like This:

public static void RegisterBundles(BundleCollection bundles)
{
     StyleBundle bootCss = new StyleBundle("~/styles/bootstrap");
                      bootCss.Include("~/Content/bootstrap/styles/bootstrap.css", 
                      new CssRewriteUrlTransform());
     bootCss.Include("~/Content/bootstrap/styles/bootstrap-theme.min.css", new CssRewriteUrlTransform());
     bundles.Add(bootCss);
}