Стили не применялись к проекту Django при загрузке в Render

Я попытался загрузить свой проект django в Render, который содержит множество HTML-файлов, а также CSS-стили. Последние используются в CSS-файле под названием 'styles.css' в папке static. Когда я запускаю проект, изображения отображаются, но такое впечатление, что стили не применяются ко всему, даже к панели администратора Django. В консоли говорится о том, что таблица стилей не была загружена из-за типа MIME. То же самое происходит с моим файлом main.js, который также находится в папке static. Я слышал об использовании gunicorn, и он у меня установлен, но я не уверен, что он действительно вызывает это, поскольку изображения загружаются нормально (хотя их размеры очень сильно отличаются). Я хочу знать, есть ли решение этой проблемы.

Для справки, вот как я добавил урлы моих медиа и статики в settings.py:

STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

Вот мой текущий urls.py для моего основного проекта:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

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

urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

Используемый мной файл base.html, содержащий в заголовке теги links и scripts, выглядит следующим образом:

{% load static %}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="{% static 'style.css' %}">
  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  
  <!-- custom css & js -->
  <script src="{% static 'main.js' %}" defer></script>
  <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>U-Community Mart</title>

</head>


<body class="body-main">
{% include 'navbar.html' %}
{% if messages %}
    {% for message in messages %}
        <div class="alert alert-info alert-dismissible fade show" id="message" role="alert">
          {{message}}
        </div>
    {% endfor %}
{% endif %}
  <div class="container" style="margin-top: 50px; margin-bottom: 0; margin-left: auto; margin-right: auto;">
    {% block content %}
    {% endblock content %}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>

</body>

</html>

Думаю, вам стоит попробовать убрать обратную косую черту "/", которая находится внутри STATIC_URL в начале второго последнего приведенного вами блока кода. Потому что в первом блоке кода я увидел:

STATIC_URL = 'static/'

Когда мы сравниваем со вторым последним блоком кода: 

STATIC_URL = '/static/'

Также я сравнил его с моими собственными проектами, строка должна быть такой:

STATIC_URL = 'static/'
Вернуться на верх