Why does Django admin render weird?

Question

After hosting my Django project on PythonAnywhere, the Django Admin login page looks like this:

I have run python manage.py collectstatic and this still happens. There are many errors in the Javascript console that include:

Refused to apply style from 'example.com/static/admin/css/dark_mode.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

The other errors also reference to MIME. This is my settings.py:

STATIC_URL = "/static/"
STATICFILE_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = '/home/mywebsite/surveys/static'

I also get these error in the error log:

2023-06-22 11:37:29,062: Not Found: /static/admin/css/dark_mode.css
2023-06-22 11:37:29,063: Not Found: /static/admin/css/base.css
2023-06-22 11:37:29,215: Not Found: /static/admin/css/nav_sidebar.css
2023-06-22 11:37:29,224: Not Found: /static/admin/css/login.css
2023-06-22 11:37:29,403: Not Found: /static/admin/css/responsive.css
2023-06-22 11:37:29,404: Not Found: /static/admin/js/nav_sidebar.js
2023-06-22 11:37:29,408: Not Found: /static/admin/js/theme.js

Can anyone tell me why this is happening?

How do you serve these files? Share your webserver configuration for these files. — Marco, Jun 22 '23 at 09:41
I agree with @Macro. The static files in production do not get served by django but by the webserver. Within your webserver's config you have to include the MIME types. — Tarquinius, Jun 22 '23 at 09:52
@Marco sorry for the late reply, i'll get the webserver configurations now — Bob The Builder, Jun 22 '23 at 11:33
@Tarquinius Sorry for the late reply, i'll get the webserver configurations now — Bob The Builder, Jun 22 '23 at 11:33
refer this answer https://stackoverflow.com/a/35557243/19205926 — Mahammadhusain kadiwala, Jun 22 '23 at 13:20

score 0 · Answer 1 · answered Jun 22 '23 at 11:42

I fixed the error. I'm posting this answer for future reference. I had improperly configured my settings.py for static files. I needed to change

STATIC_URL = "/static/"
STATICFILE_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = '/home/mywebsite/surveys/static'

to

STATIC_URL = "/static/"
STATICFILE_DIRS = [os.path.join(BASE_DIR, "static"),]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

And that fixed everything!

score 0 · Answer 2 · answered Jun 22 '23 at 13:18

You need to add `STATIC_ROOT` instead of `STATICFILES_DIRS`

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / 'static'
# STATICFILES_DIRS = [BASE_DIR / 'static'] <---- comment this

then run the command

python manage.py collectstatic

Why does Django admin render weird?

2 Answers2

You need to add `STATIC_ROOT` instead of `STATICFILES_DIRS`

then run the command

then reload the app (I think it will work)

Why does Django admin render weird?

2 Answers2

You need to add STATIC_ROOT instead of STATICFILES_DIRS

then run the command

then reload the app (I think it will work)

You need to add `STATIC_ROOT` instead of `STATICFILES_DIRS`