css files not loading - why?

Using Django Templates & Frontend
1

Hello,

so far I had integrated Bootstrap via CDN. I have now changed that and compiled my own files, which I now want to include.

My settings.py file looks like this:

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

My base.html file looks like this:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>123 Web Applications</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'css/fontawesome.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body class="pt-5">
    {% block content %}
    {% endblock content %}
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'js/script.js' %}"></script>
</body>
</html>

My file tree looks like this:

image
image260×866 14 KB

What am I doing wrong? I guess some path indication is not correct, right?

Best regards
Patrick

2

How are you running your project? Are you still in a development mode using runserver, or are you talking about a deployed production environment?

3

Hi Ken,

I’m still developing and using runserver. But I was just able to solve the problem by adding the following line to settings.py.

STATICFILES_DIRS = [BASE_DIR, 'static']

Can you tell me if these three lines are so completely correct? I don’t know when exactly a “/” should come after static and when not. Strangely enough, I found different variants on the Internet.

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

Best regards
Patrick

4

First, STATIC_ROOT is not relevent during development. Its function is to identify the location where the static files are to be collected when using collectstatic. However, when deploying your project, it’s best to have STATIC_ROOT referencing a directory completely outside your project, and if it is referencing a directory in your project, it should be a separate directory that is not used for anything else.

Second, STATIC_URL should (almost) always end with the /. (There are some exceptions, but generally, if you need to do it differently, you will know why.)

Finally, STATICFILES_DIRS are a list of directories. Unless you have a really unusual structure for your files, the entry should more properly be STATICFILES_DIRS = [BASE_DIR / 'static']. (I believe you can also get away with STATICFILES_DIRS = ['static'].) It’s one entry referencing the static directory in the base of your project, not two separate entries referencing two different directories.

You’ll find many different versions scattered around because there’s no one way to do this. Your choice of settings will depend upon your specific configuration and requirements. You will probably end up spending some time reading the docs to get an understanding of what each of these settings do - and how they related to each other and how Django uses them at different times for different purposes.