Flask and CSS file in pandoc generated HTML

Question

I have a Flask application generating and serving static HTML from markdown with pypandoc. Everything goes fine, but the css file is served as text/html and not text/css, therefore it is not interpretated.

Firefox/Chromium gives the following error :

The stylesheet http://127.0.0.1:5000/static/notes.css was not loaded because its MIME type, “text/html”, is not “text/css”.

In the Flask app (extract with pypandoc command)

...
    css = url_for('static', filename='notes.css')
    vcss = '--css='+css
    pdoc_args = ['--template=templates/notes.html',
                 vcss
                ]
    output = ppandoc.convert_text(mdblop, 'html', format='markdown', extra_args=pdoc_args, outputfile=filename)
    with open(filename) as fp:
         htmlpage = fp.read()
    return htmlpage
...

In the Pandoc template notes.html

$for(css)$
<link type="text/css" rel="stylesheet" href="$css$" />
$endfor$

I added the type="text/css" trying to force the type, but it didn’t help/change.

Css file notes.css is a standard css file.

In the final HTML served by Flask :

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

It seems that Flask does not consider this static file properly as a text/css type.

I added the classic function to serve static files, with mimetypes test which interestingly are contradictory:

@app.get("/static/<filename>") 
def route_static(filename):
    filename = os.path.join('static', filename)
    print(mimetypes.guess_type('/static/notes.css')) # returns "('text/css', None)"
    print(mimetypes.read_mime_types('/static/notes.css')) # returns "None" 
    with open(filename) as fp: 
         staticfile = fp.read() 
         return staticfile

Asked By: laconis

||

Source

Answer 1

I found the solution looking at the package flask_FlatPages (which is not needed in my case, but it documents a way to force the mimetypes of the returned element.

So my function for serving css as text/css:

@app.get("/static/notes.css")
def static_notescss():
    filename = os.path.join('static', 'notes.css')
    with open(filename) as fp:
        staticfile = fp.read()
        return staticfile, 200, {'Content-Type': 'text/css'}

This final element makes it right : {'Content-Type': 'text/css'}

Answered By: laconis

Flask and CSS file in pandoc generated HTML

Question:

Answers: