Changes Made to (Static) CSS File Not Reflecting in Django Development Server

Changes made to (static) CSS file not reflecting in Django development server

If you develop locally using Django's server there's no need to use the collectstatic command, it is only meant to collect all static dependencies to a single access point where you can point your 'real' server to, e.g. apache, lighttpd, nginx etc.

As for your problem, you insinuate it 'magically' fixes it self after a few days. Have you tried resetting your browser's cache?

Django CSS not updating

You can bypass the cache using ctrl + F5

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

Django won't refresh staticfiles

• Clearing static file python manage.py collectstatic --noinput --clear. This will clear the statics beforehand.

• Clear the browser cache

• Add a random string after the js file include, e.g jquery.js?rand=23423423, with each load.

Django server not making changes to CSS

I oftenly have the same issue, you should delete the staticfiles directory.
Additionally, you should add "no cache" header to your HTML headers in your templates, at least for development.

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

In case of trouble, you can also force your browser to clear its cache.

In case you want to reconstruct the 'staticfiles' directory, you can run the command:

python manage.py collectstatic

You do not need to stop/relaunch the django server, it has no effect on the web files (HTML/JS/CSS).

Why is my static CSS not working in Django?

For Django to serve static files, you have to make sure you have a couple of settings.

STATIC_URL

This setting specifies what url should static files map to under. You have that done already.

STATICFILES_DIRS

This specifies all the folders on your system where Django should look for static files. The idea is that you might have a couple of apps within your project, and each app might require a different set of static files. So for organizational purposes, each app might contain a static directory where it will store only it's static files. So then Django has to have a way to know where those directories are. This is what this setting is for.

STATIC_ROOT

This setting specifies where Django will copy all the static files to and not where the static files are already at. The idea is that once you leave development into production, Django can't serve static files anymore due to issues I will not go here (it's in the article). However for production, all static files should be in a single directory, instead of in many like specified in STATICFILES_DIRS. So this setting specifies a directory to which Django will copy all the static files from from all files within STATICFILES_DIRS by running the following command:

$ python manage.py collectstatic

Please note this is only necessary once you go into production and also that the directory specified here cannot be the same as any directory specified in STATICFILES_DIRS.

Urls.py

In development for Django to serve your static files, you have to include the static urls in your urls.py:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = ...

urlpatterns += staticfiles_urlpatterns()

---

Once you will complete all of the above things, your static files should be served as long as you have DEBUG = True. Out of the list above, you seem to only complete STATIC_URL. Also please note that all the steps I described above are in the docs you linked in your question (link). It might be a bit confusing in the beginning but if you read it a couple of times, it becomes clearer.

Django: cannot update css changes

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATIC_ROOT is supposed to be destination folder for collectstatic command. That's where files will be copied from source directories.

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_DIRS is the list of source folders for collectstatic. Additional folders. Because all the subfolders named static from any app listed in INSTALLED_APPS will be searched automatically by default. Which means - even thirdparty apps, e.g. DRF or whatever.

Again, in STATICFILES_DIRS you should list any source folders with staticfiles which are not /static/ subfolders of your django project apps. E.g. if you have somewhere /home/me/my_super_imgs/ and config:

STATIC_ROOT = '/var/opt/prod/static/'
STATICFILES_DIRS = (
    '/home/me/my_super_imgs/',
)

you will have all the files and subfolders of my_super_imgs inside /var/opt/prod/static/ after executing collectstatic. As well as all any content from /static/ subfolder of all the apps listed in INSTALLED_APPS.

If you have shop/static/ folder - its contents will be "collected" into staticfiles by default.

Note, you are trying to load static files under /static/ url in your template, but your destination folder is named as staticfiles. It's okay because you have configured both STATIC_ROOT and STATIC_URL, but may confuse because you have /static/ folder as well.

One more thing:

'DIRS': [os.path.join(BASE_DIR, 'templates'),
             os.path.join(BASE_DIR, 'shop', 'templates/'),
             os.path.join(BASE_DIR, 'search_app', 'templates/'),
             os.path.join(BASE_DIR, 'cart', 'templates/'),
             os.path.join(BASE_DIR, 'order', 'templates/'),]
    ,
    'APP_DIRS': True,

stop listing your app dirs here - APP_DIRS is enabled and this is enough.

upd

Why browser does not reflect css file changes?

There are many levels of caching between file on server's disk and rendered page on client-side. By doing this trick href="{% static 'css/custom.css' %}?20181209"> (see question symbol?) as I mentioned in comment under your question, you are changing full URL and it forces reloading of css (or any other) file, whilst physical file name is not changed. Update date after ? when file changed. This is a well known trick. This value may be date or hash of this file.

Also, you may introduce template tag like {% my_css %} which would insert static file names with defined date/hash/build parameter in the URL - to avoid copying this magic parameter into many templates.

Right now you may test reloading css file with parameter manually:

• update css file
• check that browser does not see changes by opening css file url
• open the same url with any ?parameter
• done, file content refreshed

---

Related Topics