CSS in django doesn't update

Question

The problem that I have is not I fail to load css file, is that I can't update them. The first few times I edit after I have just created my css files, the changes were working. But after a while, when I try to change for example: the color, it is not changing. The colour on the web is not changing and I click to see the source file, it is using the unchanged version. I have also tried to use python manage.py collectstatic but still can't update the file.

# in settings.py 
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")

# in main urls.py 
if settings.DEBUG: 
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

First, remove the static urls in urls.py. They are not needed if you added "django.contrib.staticfiles" to your INSTALLED_APPS setting. Second, please check in your browser developer tools, network tab, what the response headers are for the HTTP request for your css file. And report back here. — dirkgroten
– dirkgroten, Commented Jan 2, 2020 at 15:20

KJTHoward · Accepted Answer · 2020-01-02 16:14:06Z

1

I had this problem the other day... My issue was because the css was being cached and the cached version was being used rather than the new version.

Check what the status code of the CSS being loaded is, if you're just running a dev server with "manage.py runserver" then the status code is the first number after the "GET " output.

If the status code for your css is 304 then it is being cached. Alternatively in Chrome and Firefox (probably other browsers too but they're what I use) open then Dev tools (Ctrl+Shift+I) and go to the "Network" tab. When you reload the page if the size of your css is listed as "(memory cache)" then a cached version is being used.

To reload the page loading the new css you need to reload the page without using the cache, for Chrome and Firefox you can do Ctrl+Shift+R, the status code for your CSS should then show as 200.

To make it easier, what I did (in Chrome), is open then Dev tools (Ctrl+Shift+I) and click the "Network" tab and check the "Disable cache", this forces the site to load all static files (including the css) from the server everytime rather than using the cached version.

answered Jan 2, 2020 at 16:14

KJTHoward

8614 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vanice Leung Over a year ago

No, it is 200. [02/Jan/2020 22:14:57] "GET /static/blog/style.css HTTP/1.1" 200 363

Vanice Leung Over a year ago

And if I use other ports for example python manage.py runserver 8899 to run after I have edited the css file. The changes are working, and I don't know why.

Misha Akopov · Accepted Answer · 2020-01-05 10:35:05Z

0

On mac, press shift then reload the page. It's working.

edited Jan 5, 2020 at 10:35

Misha Akopov

13.1k27 gold badges72 silver badges87 bronze badges

answered Jan 3, 2020 at 4:01

Vanice Leung

3441 gold badge3 silver badges10 bronze badges

Collectives™ on Stack Overflow

CSS in django doesn't update

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related