Django静态文件有时加载，有时不加载

Question

I am developing a django app in which i have made a static folder in app folder. I am encountering a problem related to static file. The problem is that while i run the app by runserver command, django does collect static files but when i change something in those static files sometime file gets updated and sometime does not get updated and instead it collects old version of those files even if i save the file and run the app again by runserver command. When I rename the static files (both css and js files) and change the index.html as per new names, the app works totally fine with updated file names for a while and i face this problem again and again. I am tired of renaming the files and not got any proper solution to this problem. I will be thankful for your opinion and help.

The folders of my app look like this:

├───.vscode
├───Project
    └───manage.py    
    └───Project
        └───__pycache__/
        └───__init__.py
        └───asgi.py
        └───setting.py
        └───urls.py
        └───wsgi.py
    ├───templates
    │   └───base.html
    └───AppName
        └───templates
            └───index.html 
        └───static
            └───AppName
                └───js
                    └───indexjs.js //--> This file gets loaded with updated version and sometimes not
                └───css
                    └───style.css  //--> This file gets loaded with updated version and sometimes not
        └───views.py
        └───models.py
        └───urls.py
              .
              .
              .
              .
   

static files setting in settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'AppName/static')]

static file settings in my index.html file looks like :

{% extends 'base.html '%}
{% load static %}

{% block content-style-1 %}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">



<script src="{% static 'AppName/js/jquery-3.5.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'AppName/css/style.css' %}">

<script src="{% static 'AppName/js/indexjs.js' %}"></script>



{% endblock %}

{% block content-1 %}

<div class="main">
    <p>To do App Django-1</p>
</div>

<div class="main-container-1"> 
        <input type="text" id="textbox-1" name="name" width="50px">
        <button type="button" id ="btn-2" class="btn btn-primary">Create</button>
</div>

<div class="card mb-1" id="task-card-id">
    <div class="card-body"><p>Card Content</p><button type="button" id="btn-3" class="close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
</div>


{% endblock %}

Answer 1

Sometimes, the CSS doesn't update because it is saved in the cache. When you edit the CSS, try to clear cache by doing (if you are on google chrome):

At the top right, click More .

Click More tools. Clear browsing data.

Next to "Cookies and other site data" and "Cached images and files," check the boxes.

Click Clear data.

Answer 2

Sometimes you have to hard refresh the browser to see the changes, especially if it's Chrome. Try deleting the cookies as well to see if the problem stops. What I do sometimes is open the same page in another browser for direct comparison.

You can hard refresh by holding down ctrl and clicking the reload icon.

Answer 3

What do you mean by "file gets updated" ? Do you mean you can see the effect of changes in the browser? If yes, I have the same issue wirh Firefox. It has nothing to do with the development server (runserver) but Firefox does not reload css files in a reliable way. Even when restarting. With other browsers I never had that issue. You can try to empty cache with addons. I read about forced reload in Firefox with Shift+reload (or Ctrl?), but it did not always work in my case.