[FIXED] Flask and CSS file in pandoc generated HTML


I have a Flask application that uses pypandoc to generate and serve static HTML from markdown. Everything works fine, but the css file is served as text/html instead of text/css so it is not interpreted.

I get the following error in Firefox/Chromium:

The stylesheet was not loaded because its mime type "text/html" is not "text/css" .

In Flask app (extracted with pypandoc command)

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

In the Pandoc template notes.html



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

Css file notes.css is a standard css file.

Final HTML served by Flask:


Flask doesn’t seem to properly recognize this static file as a text/css type.

Added a legacy function to serve static files with interestingly contradictory MIME type tests.

def route_static (file name):
    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"
    Using open(filename) as fp:
         staticfile = fp.read()
         return static files


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:

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

Answer Checked By – Katrina (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published