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.

Answers


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.


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.


Need Your Help

chrome.pageAction.show only works with timeout

google-chrome-extension timeout google-chrome-devtools

I'm writing a chrome extension that is supposed to show a page action icon whenever a PDF is loaded. To this end, I'm checking the content type, and if it equals application/pdf, I chrome.pageActio...

Excel track boolean changes

excel vba excel-vba

I am using VBA code to track changes in a workbook (and by-passing Excel's terrible Shared Workbook/Track Changes feature) using the code below: