0

I am using Jinja2 version 2.10 with Django. I get a not found error for my css stylesheet. I have read every question on Stackoverflow related to Jinja2 templating in Django and tried all the answers, still no success.

My jinja2 config file (top level in my Django project): 

from django.contrib.staticfiles.storage import staticfiles_storage
from django.urls import reverse
from jinja2 import Environment

# This enables us to use Django template tags like {% url ‘index’ %} or {% static ‘path/to/static/file.js’ %} in our Jinja2 templates. 
def environment(**options):
    env = Environment(**options)
    env.globals.update({
        'static': staticfiles_storage.url,
        'url': reverse,
    })
    return env

My html templates load as expected and the page shows in the browser, it's just the css load that isn't working. My folder structure is:

Django_project 

-- my_app folder
      -- Jinja2
      |      -- my_app
      |          -- .html files
      | -- static
              -- my_app
                  -- styles
                      -- .css file

That is, jinja2 and static are both folders on the same level inside my_app folder.

My base.html file:

<!DOCTYPE html>

<html lang="en">
 <head>
   <meta charset="utf-8">
    <!--bootstrap responsive viewport: mobile device optimization first -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <bootstrapp css goes here>

    <link rel="stylesheet" type="text/css" href="/my_app/static/styles/my_app.css">

    <!-- defines an area that child templates fill -->
    {% block head %}

    {% endblock head %}
 </head>

I tried using the {% static 'path/goes/here.css' %} and got an error message on 'static' unrecognized. But if I use the normal {% load static %} Django tags at the top of the file, I get an error that 'load' is an unrecognized tag (which I expected because I'm using Jinja2).

Bootstrap css loads. I've tried excluding the bootstrap links, that makes no difference. I've tried using a static prefix in Jinja2 environment globals, as explained here, it seems to make no difference.

I've read the Jinja2 and Django documentation and followed all the set up recommendations. css templates load in other Django projects where I'm not using Jinja2, using {% load static %}.

Is hardcoding the href the right thing to do? I've tried every possible combination of path reference in case I was just putting the wrong path there. The error message is 'not found: path/etc/etc.css'

Any help much appreciated, thanks!

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Nufdriew
  • 27
  • 8

2 Answers2

1

Did you try turning on debug mode? If it only stops working when debug is off, try this Why does DEBUG=False setting make my django Static Files Access fail?

ima_hima
  • 11
  • 1
  • Thanks, yes I tried that amongst many things. It was useful to learn about the debug mode but the problem turned out to be path related after all. I figured it out by working back from getting only the css file to show in the browser then making corrections to the css path name in the html file. Using Jinja2 the path name looks like: href="{{static('/appname/css/cssfilename.css')}}" – Nufdriew Jan 21 '20 at 23:46
0

Just to mark this question as answered now: the mistake I made was in using not quite the right syntax for the css file path name in the html header. I got only the css file to show in the browser then made corrections to the css path name in the html file. Using Jinja2 the path name looks like: href="{{static('/appname/css/cssfilename.css')}}"

Make sure to include the parentheses, inside quotation mark and leading forward slash.

Nufdriew
  • 27
  • 8