Why is my @import in CSS not working when importing other CSS files?

I'm building a Django project and trying to organize my CSS files by importing them into a single index.css. However, the styles from the imported files are not being applied when I include only index.css in my base.html.

Here's what I've done:

File Structure:

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>

Observations:

If I directly include footer.css or courses/courses.css in the HTML, the styles work.
```
<link rel="stylesheet" href="{% static 'css/courses/courses.css' %}">
```
The styles do not work when I rely on @import in index.css.

Questions:

Why are the imported styles not applying when using @import in index.css?
Is there a better way to structure CSS imports in Django to only link index.css in the HTML?
Could this issue be related to Django's STATIC_URL or how @import resolves paths?

What I've Tried:

Checked that static files are correctly set up in settings.py:

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

Verified that the CSS files load correctly when linked directly.
Tried absolute paths in @import, like:
```
@import url("/static/css/footer.css");
```