Django: cannot update css changes

Question

After running my server, my page doesn\'t show the updates that I\'ve made in the CSS file.

My navbar won\'t recognize a css rule: .navbar-bg {background-colo

Answer 1

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