Static/CSS files issues in django

Question

I am just new to django and after making a simple authentication forms for log in and logout.Everything is working perfectly but whenever i want to make some changes to the styles (CSS) it doent work. I have tried after changing the directory of static files but all in vain. Even if i remove all the code from CSS file the page still showing all the style related stuff. kindly suggest me what should i do? below i have attached the image of my all code and directories.

Answer 1

Sounds like the CSS file has been cached by your browser. Try clearing your cache and reloading the page. Then you should see if Django is loading in your CSS file or not. If your using Chrome you can do a hard reload with CTRL + Shift + R

Answer 2

The problem that you are facing is not specific to Django, but you can fix it with Django. Browsers tend to cache static files such as CSS for better performance and lower data consumption.
One quick fix is to use your browser to clear its cache. The solution is dependent on your browser. However, there are 2 problems with this approach.

1. You have to clear your cache every time
2. Your users, in production, will also face the same issues. You push an update, they see the HTML content, the style from CSS is not applied until the browser clears its caches.
   

To fix these issues once and for all follow these steps:

1. In your settings.py add a const and name it something like PROJECT_VERSION. The value of PROJECT_VERSION should be the version of your project.

   PROJECT_VERSION = "0.0.0.1" # replace the version number with your project version
   

2. Create a templates folder, if you don't have it.

3. Create a folder named templatetags inside your templates folder

4. Inside the templatetags, Add an empty file and call it __init__.py

5. Add another file and call it whatever you want (I call it custom_tags.py)

6. Inside the second file, add the following:

    from django import template
    from django.conf import settings
   
    import uuid
   
    register = template.Library()
   
   
    @register.simple_tag(name='cache_bust')
    def cache_bust():
   
        if settings.DEBUG:
            version = uuid.uuid1()
        else:
            version = settings.PROJECT_VERSION
   
        return '__v__={version}'.format(version=version)
   

7. In Your settins.py, add the following line:

    TEMPLATES = [
        {
            'OPTIONS': {        
                'libraries':{
                    'custom_tags': 'templates.templatetags.custom_tags', # Add this line
                },
            },
        },
    ]
   

8. Now, In every template (HTML file) of yours, add this on the top:

    {% load custom_tags %}
   

9. And as the last step, while referring to any static file (CSS, JS, PNG, etc.), add ?{% cache_bust %} to the end of the file name. Note that this won't change the content of the file but will force the browser to re-fetch it. For example:

    <link rel="stylesheet" type="text/css" href="{% static 'Style.css' %}?{% cache_bust %}" />
   

In the debug mode (while development), the value of `cache_bust` will change every time so you won't have any issue with the caching.
In the production mode, the value of `cache_bust` will be the version of your project that you set in your `settings.py`. The files will be cached but will be re-fetched by the browser whenever you change the version of your project.