Django CSS not updating

Question

I have this code to refer to my CSS script in my base.html for my Django project:

<link href="{% static 'css/project.css' %}" rel="stylesheet">

The problem is that whenever I add or remove styling from project.css, it doesn’t update when I run the server.

I know this happens because every time the page loads the browser cache will think it’s seen the file before and reload the cached version from disk. I also know a solution is to change the CSS filename every time I make an update.

Is there an easier way to reload the CSS file every time I refresh my browser?

score 106 · Accepted Answer · answered Oct 06 '18 at 20:44

106

You can bypass the cache using ctrl + F5

for detailed reference: https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache

answered Oct 06 '18 at 20:44

Abhijith Konnayil

4,067
6
23
49

So it should be fault of Django or just the browser. Too stupid... – Alston Oct 26 '22 at 04:11

score 18 · Answer 2 · answered Jul 11 '19 at 10:21

You have to click on Ctrl + f5 every time to update your CSS, which isn't dope. You can actually do something like this:

<link rel="stylesheet" href="/static/css/mycss.css?{% now "U" %}"/>

The {% now "U" %} will generate a random timestamp which updates your CSS every time you reload the page. I hope this works.

For better understanding check out: click here

score 6 · Answer 3 · answered Jan 03 '20 at 03:41

6

If you are on mac and using safari, you can press shift then press the reload key.

answered Jan 03 '20 at 03:41

Vanice Leung

304
1
3
10

7

This actually works. Press `shift` + `cmd` + `R` if you don't want to use the mouse. – tfad334 Apr 30 '20 at 06:55

score 2 · Answer 4 · answered Jun 22 '20 at 19:41

2

ctrl+f5 for Chrome and Windows helped.

answered Jun 22 '20 at 19:41

William Łepkowski

21
1

score 2 · Answer 5 · answered Aug 09 '21 at 05:17

Bypass your cache — Simple instructions

In most Windows and Linux browsers:

Hold down Ctrl and press F5.

In Apple Safari:

Hold down ⇧ Shift and click the Reload toolbar button. In Chrome and Firefox for Mac:

Hold down both ⌘ Cmd+⇧ Shift and press R.

know more

score 2 · Answer 6 · answered Oct 31 '21 at 23:41

It happens during development (when DEBUG is set to True in settings.py) if you change the static files under the directory set STATIC_ROOT, instead of the static directories under the particular app.

In other words, when working locally (on localhost) and DEBUG is set to True, do not forget to change the static files served under your app directory.

score 1 · Answer 7 · answered Nov 17 '20 at 17:46

In addition to the answer of Xamuel San, if you are using Jinja to link your stylesheet, then you can try the following:

<link rel="stylesheet" type="text/css" href='{% static '/css/main.css' %}?{% now "U" %}'>

It perfectly worked on Chrome and Firefox. You can also use crtl+f5 to do the same but manually.

score 1 · Answer 8 · answered Aug 09 '21 at 05:30

1

In chrome you can press Ctrl + F5. If this does not work restart apache

answered Aug 09 '21 at 05:30

Darwin

1,695
1
19
29

score 0 · Answer 9 · answered Dec 16 '20 at 20:34

0

i prefer to temporarily disable the browser cache.

right click => inspect => network

[]Disable cache

answered Dec 16 '20 at 20:34

Jonatan Garbuyo

1

score 0 · Answer 10 · edited Jan 08 '21 at 09:08

0

You can try this:

specify type attribute in the link tag/field.

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

edited Jan 08 '21 at 09:08

Ajay Lingayat

1,465
1
9
25

answered Jan 08 '21 at 04:58

score 0 · Answer 11 · answered Feb 10 '21 at 15:48

0

Most browsers allow you to disable http caching to some degree. In Mozilla, if you're using the Web Developer tools, there's a setting to do this.

answered Feb 10 '21 at 15:48

Austin A

2,990
6
27
42

Django CSS not updating

11 Answers11

Linked

Related