MVC CSS Not Rendering in Visual Studio When Debugging

MVC CSS not rendering in Visual Studio When debugging

One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.

I will explain on an example.

If you have bundle which looks like this:

var styles = new StyleBundle("~/Content/css").Include(
"~/Content/toastr.css",
"~/Content/flags/stylesheets/flags16.css",
"~/Content/flags/stylesheets/flags32.css",
"~/Content/Site.css")

And in flags16.css you have:

background:url('flags/images/flags16.png');

Which uses file in ~Content/flags/images/flags16.png

That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file.
However, in debug mode, ASP.NET MVC will disable minification, and if you used @Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:

<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">

And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.

One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.

UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with @Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.

CSS not updated during debugging ASP.NET MVC application

Your browser is caching the css. If you force a refresh with F5 that should display any changes.

CSS changes on MVC App not working

This is likely due to the bundling framework using bootstrap.css in local/debug mode and bootstrap.min.css when you deploy. The framework uses a set of conventions when determining which files to add to a bundle, one of which is to use the .min version of a file, if it exists, for release builds. This is probably what's biting you. You made the change in bootstrap.css but not in bootstrap.min.css.

Try deleting bootstrap.min.css and re-deploying. This should force the frameworkt to minify and use the bootstrap.css file that you modified.



Related Topics



Leave a reply



Submit