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

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

Вот что я сделал:

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

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

`index.css`:

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

`base.html`:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
  {% block content %}
  {% endblock %}
</body>
</html>

Наблюдения:

Если я непосредственно включаю footer.css или courses/courses.css в HTML, стили работают.
```
<link rel="stylesheet" href="{% static 'css/courses/courses.css' %}">
```
Стили не работают, когда я полагаюсь на @import в index.css.

Вопросы:

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

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

Проверили правильность настройки статических файлов в settings.py:
```
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
```
Убедитесь, что CSS-файлы загружаются правильно при прямой ссылке.
Попробовали абсолютные пути в @import, например:
```
@import url("/static/css/footer.css");
```