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

So, what I found is that if:

1) Changing custom.css file in staticfiles/css and then running: collecstatic wouldn't update the custmo.css in static/css folder.

This is why my update wasn't reflecting on the different browsers.

2) Even if I delete custom.css in static/css and then run collecstatic to create/update custom.css, it does not happen. And the browser doesn't reflect the changes in the css file I want.

3) The solution, at the moment for me, is to make the modifications directly in the static/css folder, to be exact here: static/css/custom.css, and then the changes are visible in browser, in the case, having the navbar background in black.

Is this how it is supposed to be done?

Answer 2

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

Answer 3

is not that! it happened to me the exact same thing! is the cache (facepalm)

Try it in incognito mode and you will see the changes in your CSS

Answer 4

You can test this method. I hope would be benefit for you

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

Then add you can static files in static/static_dirs folders.