CSS не загружается на django при различных настройках окружения

Я использую Django в качестве фреймворка, и я хочу скрыть колонку в мобильном представлении с помощью CSS.

Я использую три разных файла настроек: base, dev и prod. Все основные настройки находятся в базовом файле, и единственная разница между настройками dev и prod - в том, какую базу данных я использую (локальный Postgres и удаленный Postgres на Railway).

У меня есть файл base.html, в который я загружаю статические файлы:

<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'main/css/base.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'main/img/favicon.ico' %}"/>

Вот структура моего проекта:

enter image description here

Я хочу скрыть колонку в мобильном представлении, поэтому вот что у меня есть в моем base.css:

@media only screen and (max-width: 800px) {
  td:nth-child(1) {
    display:none;
  }
  th:nth-child(1) {
    display:none;
  }
}

Однако, когда я запускаю приложение, используя настройки dev - все работает нормально. Когда я запускаю с помощью prod - изменения не отображаются. Похоже, что файл CSS не читается, но мне интересно, почему, если код один и тот же - разница только в использовании разных баз данных на разных настройках. Я уже сделал collectstatic с изменениями в CSS и выложил на сервер. Но даже когда я запускаю приложение с настройками prod локально - все равно CSS не принимается во внимание.

Согласно вашему вопросу, вы не получаете css после запуска collectstatic в production.

Почему вы не получаете, потому что вы не добавили STATIC_ROOT в файл settings.py.

Обслуживание статических файлов в производстве:

STATIC_ROOT: Это абсолютный путь к директории, где инструмент Django collectstatic будет собирать все статические файлы, на которые ссылаются наши шаблоны.

Попробуйте добавить STATIC_ROOT в файл settings.py и запустить collectstatic.

STATIC_URL, STATIC_ROOT и STATICFILES_DIRS эти три должны быть в файле настроек для производственного использования.

файл settings.py:

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

Теперь это должно работать идеально в продакшене.

Я решил эту проблему, переместив папку static, в которой находятся мои изображения и CSS, в папку app. Затем я установил следующие настройки:

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

И удалил STATICFILES_DIRS - он не нужен.

Теперь он работает как на prod, так и на dev. Спасибо, @ManojTolagekar и @Ivan Starostin.

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