Why don't my CSS static files work in Django when I pass an optional parameter to the view?

Question

I am making an application in Django, where I have a main (index) page displaying a number of objects styled with CSS. The CSS is in a static file. When I do not pass any parameters to the index view in views.py, all the CSS renders great. However, whenever I pass in an extra parameter to the view url, no CSS is applied (but the information gets displayed correctly). Please can someone help me with this?

settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "auctions/static")
STATICFILES_DIRS = [os.path.join(BASE_DIR, "auctions/static")]

urls.py (app):

urlpatterns = [
    path("categories", views.categories, name="categories"),
    path("", views.index, name="index"),
    **path("category/<str:cat_name>", views.index, name="index"),**
    path("create_listing", views.create_listing, name="create"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
    path("<int:id>", views.view_listing, name="view"),
    path("watchlist", views.watchlist, name="watchlist")
]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT

Template:

{% load static %}
<link href="{% static 'auctions/styles.css' %}" rel="stylesheet">

views.py:

def index(request, cat_name=None):
    if cat_name is not None:
        listings = Listing.objects.filter(category=cat_name)
        listings = listings.filter(bid_active=True)
    else:
        listings = Listing.objects.filter(bid_active=True)
    return render(request, "auctions/index.html", {
            "listings": listings
            })

Basically, the view works if I don't enter the extra parameter (but I have to in order to avoid redundancy in my code).

Answer 1

you have them both named "index" in your url patterns. Name one of them 'index_with_category'. That's not going to solve your problem though. For that, look at the source in your browser and look to where your css is pointing.

When you specify a category, your url patterns matches the category path, it is looking for your styles.css in /static_root/category/auctions/styles.css but you want it to point to /static_root/auctions/styles.css. Since your url has the category in there, and there is no leading slash in the href to your css file, the browser is looking for auctions relative to category, which in some cases you may want, but probably not in this one. When you don't pass a category, your url is at the root of your site already so the relative reference to the auctions directory works.

I suspect you want to change that line to have a leading slash otherwise it will look for auctions relative to category:

<link href="{% static '/auctions/styles.css' %}" rel="stylesheet">

Answer 2

you wouldn't believe if I tell you that I only fail to type a slash (/)

STATICFILES_DIRS = [os.path.join(BASE_DIR, "auctions/static/")]