CODEWITHSUNDEEP
pythonhtmldjango
99lives
99lives

Reputation: 848

Django only loads the first static file in a template

As the title says, only the first static file in a Django template is loaded.

Here is the offending code:

{% load staticfiles %}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{% block title %}{% endblock title %}</title>
        <link rel="stylesheet" href="{% static 'global/css/grid.css' %}" media="screen" title="grid" charset="utf-8">
        <link rel="stylesheet" href="{% static 'global/css/style.css' %}" media="screen" title="main" charset="utf-8">
    </head>

I have 'global' set up correctly in my STATICFILES_DIRS, both 'grid.css' and 'style.css' exist in that directory, and both styles do not conflict.

But only 'grid.css' loads when I render a page with the above code in it.

When I check inspect element in chrome, both links are displayed/rendered correctly:

<link rel="stylesheet" href="global/css/grid.css" media="screen" title="grid" charset="utf-8">
<link rel="stylesheet" href="global/css/style.css" media="screen" title="main" charset="utf-8">

But when I check the 'Sources' of chromes dev tools it shows the folder 'static/global/css', and within it only grid.css is displayed. So Django is not delivering style.css in the response.

I know that style.css works, when I comment out the line that loads grid.css, style.css does load.

So again, it seems that only the first static file that is requested in a template is delivered in the response.

Upvotes: 1

Views: 493

Answers (2)

99lives
99lives

Reputation: 848

It's the HTML attribute 'title'. When that is set on a stylesheet link, then that stylesheet will become the 'prefered' stylesheet, and all others will be ignored. I got rid of the title attributes and it worked.

Upvotes: 1

Aswin Kumar K P
Aswin Kumar K P

Reputation: 1102

I dont think this is from Django, as far as my knowledge django does not do that.

Clear your cache and try again. Maybe your first CSS file might have been loaded from cache and second file might not be cached earlier.

If both files are not loaded after clearing cache, then there is a mistake in your static file configuration.

If the first CSS comes even after clearing the cache, check the Network Tab in Google Chrome. See where the request goes, and see the response received. Check whether the response comes as the file or 404 or 503 and debug accordingly.

Upvotes: 0

Related Questions