Django admin interface missing css styling in production

The user interface is working well, and all CSS styling and static files are served correctly, but the admin interface is missing CSS styling. I looked at similar posts but in those posts people had the issue with both the user and the admin interface. My issue is only with the admin interface.

Please see my static file settings below from settings.py:

STATIC_URL = '/static/'

#Location of static files
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]

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

And this is my nginx configuration:

server {
    listen 80;
    server_name MY_SERVER_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/MYUSERNAME/myproject;
    }

    location /media/ {
        root /home/MYUSERNAME/myproject;
    }

I already executed python manage.py collectstatic on the server and got this message:

0 static files copied to '/home/MYUSERNAME/myproject/staticfiles', 255 unmodified.

I restarted nginx after that and also tried emptying my browser cache, but the issue persisted.

More info as requested by @Omar Siddiqui. Using Django 3.2 My mysite/urls.py contains:

from django.contrib import admin
from django.urls import path, include

# Imports to configure media files for summernote editor
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('qa.urls')),
    path('summernote/', include('django_summernote.urls')),
    path('chatbot/', include('chatbot.urls')),
]

# Enable media files for summernote editor
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

Solution

Could you please try below steps and let me know if it's working or not?

Apply below changes in settings.py file:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Remove below line from your settings.py:

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

Execute below command in production:

python manage.py collectstatic

Update nginx file like below one:

# prevent css, js files sent as text/plain objects
include /etc/nginx/mime.types;

server {
    listen 80;
    server_name MY_SERVER_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        autoindex on;
        autoindex_exact_size off;
        root /home/MYUSERNAME/myproject;
    }

    location /media/ {
        autoindex on;
        autoindex_exact_size off;
        root /home/MYUSERNAME/myproject;
    }
}

Explanations:

STATIC_ROOT is the folder where static files will be stored after using python manage.py collectstatic
STATICFILES_DIRS is the list of folders where django will search for additional static files aside from the static folder of each app installed.

In this case our concern was Admin related CSS files that why we use STATIC_ROOT instead of STATICFILES_DIRS