Почему мой @import в CSS не работает при импорте других файлов CSS? ⇐ CSS

[Anonymous]

Я создаю проект Django и пытаюсь упорядочить свои CSS-файлы, импортируя их в один index.css. Однако стили из импортированных файлов не применяются, когда я включаю только index.css в свой base.html.
Вот что я сделал :

Структура файла:

Код: Выделить всё

static/
├── css/
│   ├── index.css
│   ├── footer.css
│   └── courses/
│       └── courses.css

[code]index.css[/code]:

Код: Выделить всё

@import url("footer.css");
@import url("courses/courses.css");
.verticalSpace {
padding-top: 100px;
}

[code]base.html[/code]:

Код: Выделить всё

[*]


{% block content %}
{% endblock %}

Наблюдения:

• Если я напрямую включаю footer.css илиcourses/courses.css в HTML, стили работают.

  Код: Выделить всё

• Стили не работают, когда я использую @import в index.css.

Вопросы:

• Почему импортированные стили не применяются при использовании @import в index. css?
• Есть ли лучший способ структурировать импорт CSS в Django ссылается только на index.css в HTML?
• Может ли эта проблема быть связана с STATIC_URL Django или с тем, как @import разрешает пути?< /li>

Что я пробовал:

• Проверил, правильно ли настроены статические файлы в settings.py:

  Код: Выделить всё

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

• Проверено, что файлы CSS загружаются правильно при прямой ссылке.
• Проверил абсолютные пути в @import >, например:

  Код: Выделить всё

  @import url("/static/css/footer.css");
  

Подробнее здесь: https://stackoverflow.com/questions/793 ... -css-files