ASP.NET MVC does not automatically refresh when changes are made to the CSS file

Currently, I am diving into the world of Bootstrap 4 within an ASP.NET MVC project, exclusively making changes to the index.cshtml file in JetBrains Rider. However, I've encountered a strange issue that has me stumped.

Each day, when I begin writing new HTML code, everything appears to be functioning correctly - dotnet watch run is running smoothly, and inline styling is being applied as expected. But as soon as I make changes to site.css, those modifications are not being recognized for some reason. It's puzzling because sometimes the issue resolves itself out of the blue (quite weird, but I'll take it). For instance, yesterday I was unable to update the CSS until I launched the project in JetBrains Rider, yet today it stopped working again. On another occasion, the problem disappeared when I wasn't even using my computer (strange, right?). Have any insights on what might be happening or how to resolve this hiccup? My attempts at finding answers through Google have been unfruitful so far.

P.S. Despite updating my JetBrains IDE to the latest version, the situation remains unchanged.

css.netasp.net-mvcbootstrap-4rider

Answer №1

The issue is related to browser caching. To solve this, you can add a random number or GUID at the end of your CSS file link like this: 

<link rel="stylesheet" href="style.css?v=5.2.7">
Make sure the version number is generated randomly. Before making this change, you may also want to clear your cache or do a hard reload of the page to see the updates.

For more information, check out : https://css-tricks.com/strategies-for-cache-busting-css/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The media query was running smoothly until it unexpectedly stopped functioning

I've encountered an issue where something that used to work perfectly fine suddenly stopped working :( @media only screen and (max-width: 768px) { form, button, input { width: 80vw !important; } } <meta name="viewport" content="width=de ...

htmlcssmedia-queries

Tips for effectively utilizing conditional comments

Is it possible to address all IE bugs by writing CSS in just one conditional block? <!--[if lt IE 9]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> If I use a single conditional comment for IE versions less th ...

htmlcssinternet-explorer

Is the card-columns class not available in Bootstrap 5.0? Are there any other alternatives provided by Bootstrap besides using CSS media queries and flex column?

While exploring Bootstrap 5.0, I noticed that the card-columns class was missing and there is no mention of it or its alternative in the Bootstrap 5.0 documentation. However, it can still be found in the Bootstrap 4.6 documentation. I understand that usin ...

csstwitter-bootstrapbootstrap-4bootstrap-5

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...

htmlcsscss-shapeszigzag

Range slider in Bootstrap showing values as labels

After reviewing the Bootstrap 4 documentation and various responses on Stack Overflow, I am still unable to locate a method for the range slider to show the value as the track is adjusted. https://i.sstatic.net/Iu0ug.png I have come across open-source pr ...

twitter-bootstrapbootstrap-4

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

javascriptjqueryhtmlcss

"Have you ever wondered about the magic that unfolds when we utilize AJAX

I'm confused about the concept of AJAX. When we use AJAX, why doesn't the page get refreshed every time? Is this related to the page_load method or something else? ...

.netajaxasp.net-ajax

Ways to add a namespace to JsonResult

When working in the MVC4 C# environment, I am looking to add a namespace to my jsonObject. Currently, I have been using the following code structure: var results = Globals.StaticList .Where(x => x.LookupName.ToLower().Cont ...

asp.net-mvcjson

How can you exclude templates in an Angular 7 CLI build to incorporate MVC views?

Currently, I am exploring the latest updates in Angular (7+) and CLI. After completing parts of the 'Tour of Heroes' tutorial, I have been able to use 'ng build' to generate production files. However, a key requirement for me is using ...

asp.net-mvcangularangular-cling-build

The PHP Include function seems to be malfunctioning and unable to properly display

Everything you see is what I have on my home.php page <?php include ('../bgs/bg-verbier.html'); include('../menus/menu-verbier.html'); ?> Both of the files requested are located in the parent directory. The /menus/menu-v ...

phpcss

Content Management System editing plan

Have you ever wondered if there is a structured approach to editing content management systems like Wordpress and Joomla? When it comes to editing aspects such as CSS and JavaScript, what steps do you usually take? Personally, I have been creating files l ...

javascriptcsscontent-management-systemfrontendoverwrite

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

I am facing an issue with CSS animations in Firefox. When I try to slide in some radio buttons upon clicking a button, the animation seems to be firing twice in Firefox while it works fine in Chrome. I have attempted several solutions but haven't been ...

javascriptjqueryhtmlcssanimation

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Here is my current setup: http://jsfiddle.net/YKXUb/1/ My CSS looks like this: .two { height: 100%; width: 100%; border:1px solid green; } .hold { float: left; height: 100%; width: 35%; border:1px solid green; } .right { hei ...

htmlcss

Is there a way to shift this div to the bottom and incorporate some quirky pop-up squares?

I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...

jquerycss

Is Span responsible for creating a new line in this particular sentence?

I am struggling with aligning the following line of text that includes percentages like 100% and 99.8%. Is there a way to display all these elements in one line, side by side? <span style="font-size:12px;font-weight:bold;padding-left:800px;">99%& ...

htmlcssjsp

Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...

htmlcss

Embed the div within images of varying widths

I need help positioning a div in the bottom right corner of all images, regardless of their width. The issue I am facing is that when an image takes up 100% width, the div ends up in the center. How can I ensure the div stays in the lower right corner eve ...

htmlcssangulartypescript

Is there a way to have only the <a> tag be clickable in an unordered list, without making the entire list item clickable?

I just need the text to be made clickable instead of the entire list item block. <a class="menu_head">Hello</a> <ul class="menu_body"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2 ...

htmlcss

Achieve a sliding effect between two divs using CSS only

I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially. My goal is to achieve an effect where when you hover over the first div, the second one slides upward and ...

htmlcssanimation

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

javascriptjquerycss