Django HTML Template Can't Find Static CSS and Js Files

django html template can't find static css and js files

Some of settings are misused:

STATIC_URL = '/static/' - this is fine

STATIC_ROOT = '/vira_app/template' - nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.

As mentioned in comments you might need to define STATICFILES_DIRS - a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. However you'll need to collect those files all together to deploy somewhere. STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example).

Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. This means if you move static subfolder from templates to the vira_app root - you won't have to mention it in the STATICFILES_DIRS.

So:

• STATIC_ROOT should not point to any templates subfolders, change it to something more "global"
• STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
• collectstatic must be run before checking your styles and scripts in rendered page
• after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded

PS

Note, some of your static files are linked in wrong way in the shown template:

 <script src="assets/vendor/aos/aos.js"></script>

this should be changed to {% static... as well.

CSS doesn't work as expected in HTML files in Django

In firefox and I think in chrome pressing F12 can show console, then we can see if all .css files are loaded properly and what is the problem, if they aren't. Can also pick element and see what css styles are applied to it and where they come from. Django has specific way of managing static files that may be misconfigured, if tags in the template work, then the problem is most likely in the static files.

Django will likely produce error message in the console if it can't provide a static file.

In any case, we may need some code from the template to see what is happening. If configured properly it can load static files, without problems, but there are steps to it. (explained here https://docs.djangoproject.com/en/4.0/howto/static-files/)

Can you use .js static files?Or any static files at all?

2 Important parts that may be missing. One is to use:
python manage.py collectstatic
Command after every change of static files.
https://docs.djangoproject.com/en/4.0/ref/contrib/staticfiles/#django-admin-collectstatic

The other is to start templates using staticfiles with:
{% load static %}

Then to remember the syntax for the files themselves like:

<link href="{% static 'introjs.min.css' %}" type="text/css" rel="stylesheet">

So django knows to load a static file instead.

Reply / Edit 2:

The tags seems ok(load static part). I think you don't need to repeat them in the same template, even if it extends other stuff, can just set it once every template that uses static files.

So there are 3 things you need. One is to have the tags in templates, as you do, the other is to have the static files in your static directory(specified in STATIC_URL in your settings file), and lastly to use collectstatic command after each change.

So lets say we look at

<link rel="stylesheet" href="{% static 'css/index.css' %}">

It looks good. That suggests you have 2 things for it to work. One is in your static files directory(defined in your settings file), you have:

static(or whatever name)/css subdirectory and then you have index.css file in there.
Also after you added the css file in there, to have done python manage.py collectstatic at least once.

The rest seems to be from CDNS(basically other hosting sites) Django should load them by itself, if the hosting there allows it.

Basically that is the idea,yea. All in here seems good. If there are still problems, check the static directory in settings py and make sure you used collectstatic after changes.

Errors will show in the terminal, so you can see if something isn't loading, why. : )

For errors in static files that are the 2 places to check. One is the terminal where python is providing info(or log files on the server if you can't see terminal), the other is the browser itself - it will show why it isn't loading a static file.

Fixing load static Django Templates

I managed to solve this issue by removing the STATIC_ROOT setting.

I can't explain why this works but I'll take it.

---

Related Topics