Django Admin CSS MIME Type Issue

The issue you're experiencing with the admin CSS not loading correctly due to incorrect MIME type is a common problem when deploying Django applications with Nginx. The browser is receiving the CSS files as text/plain instead of text/css, which prevents them from being applied.

The Problem

Your static files are being served, but Nginx isn't setting the correct MIME type for CSS files. This is causing browsers to reject the stylesheets.

Solution

The issue is likely in your Nginx configuration. You need to ensure that Nginx is configured to serve CSS files with the correct MIME type. Here's how to fix it:

1. Update your Nginx configuration to include proper MIME type definitions. Add or modify the following in your server block:

NGINXCopied
server {
    # Your existing configuration...
    
    location /files/ {
        alias /var/www/files/;
        include /etc/nginx/mime.types;
        default_type application/octet-stream;
        
        # Optional but recommended for static files
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
    }
    
    # Rest of your configuration...
}

2. Verify that /etc/nginx/mime.types exists and contains the correct mapping for CSS files. It should have a line like:

text/css                   css;

3. Restart Nginx after making these changes:

BASHCopied
sudo systemctl restart nginx

Additional Considerations

1. Check file permissions: Make sure Nginx has read permissions for your static files.

2. Verify your STATIC_URL setting: Your current setting points to an HTTPS URL, which means:

   • Your Nginx should be configured to handle HTTPS
   • The domain static.addohm.net should be properly set up to point to your server

3. Consider using the django.contrib.staticfiles app as recommended in the Django documentation. Make sure it's in your INSTALLED_APPS.

4. Double-check your collectstatic process: Ensure that all admin files are being collected correctly to your STATIC_ROOT.

If the issue persists after implementing these changes, you might want to check your Nginx error logs for any additional clues:

BASHCopied
sudo tail -f /var/log/nginx/error.log

This should resolve the MIME type issue for your admin CSS files.