Почему не подключается css к Django

введите сюда описание изображения

settings.py

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

index.html

{% extends 'main/base.html' %}
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'main/css/style.css' %}">
<body>
  <div class="grid-wrapper">
    <header class="grid-header">
        <img class="circles" src="{% static "/img/main8.jpg" %}" alt="main pic">
        <p>Предоставим качественное образование, <br>
          поможем понять школьную программу, <br>
          улучшить оценки и <br>
          подготовиться к экзаменам</p>
    </header>
  </div>
</body>
{% endblock %}

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/png" href="{% static 'main/img/favico.png' %}">
  <title>{% block title %}{% endblock %}</title> 
  <link rel = 'stylesheet' href = "{% static 'main/css/main.css' %}">
  <link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
  <link rel = 'stylesheey' href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>

style.css

.grid-wrapper {
    display: grid;
    grid-template-columns: 1 fr;
    grid-template-rows: 1 fr;
    grid-template-areas: 'header header';
}

.circles {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header {
    position: relative;
    width: 100%;
}

p {
    color: red;
    text-align: center;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}

h1 {
    color: red;
}

Несколько раз изменял settings.py. Делал и по документации Django, и по видео-уроку. Удалял main в static и писал заново. Менял название css и html - файлов. Вне static всё работают. Изображения из static/img подключаются.

Измените файл settings.py таким образом:

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

А в файле html просто добавляйте main:

{% static 'main/css/style.css' %}

Конечно можно оставить так же как у вас и сделано, просто поменяйте везде с "{% static 'main/css/style.css' %}" на "{% static 'css/style.css' %}".

Что то подобное было. Джанго не видел ни css ни js. В итоге решил этот вопрос с помощью изменения подключения статики в settings.py Попробуйте этот код, я свой закоментил, вставил этот код и вуаля все мои изменения в статике заработали и все начало работать. Даже потом, когда я снова свой стандартный код раскоментил, а это подключение стаики убрал, все уже работало. Надеюсь поможет комуто. Мне так помогло. Отпишитесь кому поможет.

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

На сколько я понял, BASE_DIR дает нам каталог нашего проекта. Поэтому, когда мы делаете os.path.join(BASE_DIR, 'myproject/static'), это становится myproject/myproject/static. Или '/static'), надо указывать 'static/'),или попробуйте так '/').

Надеюсь поможет комуто. Мне так помогло. Отпишитесь кому поможет.

Здесь проблема в том, что твоя ссылка на твой css файл грузится перед ссылкой на бутстрап файл. переставь свой линк со своим css файлом в конец, и не забывай кликать в своем файле стилей ctrl + s, это так на всякий случай.

Вернуться на верх