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
How to Center Text Inside an Svg Path
CSS 3 Gradients for Styling Svg Elements
Firefox Support for Alignment-Baseline Property
What Is the Meaning of the "@Include" in .CSS Files
Line Height Default Value If Font Size Is 100%
CSS Grid Vertical Columns with Infinite Rows
CSS Auto Numbers for Table Rows - Not First
Is Opacity Is Inherited in a Div
How to Set a Value of 'Inherit' to a CSS Custom Property
Moodle Not Showing CSS and Theme with Linux Server
Draw a Line That Doesn't Get Thicker When Image Stretches
Change Background Color of Selectinput in R Shiny
Css: Move a "Float:Right" Element to Top (To Align with the First Element of the List)
How to Import CSS File into Google Colab Notebook (Python3)