CSS file not being downloaded - Flask

Question

I am suddenly having a very odd issue where my browsers (Chrome, Safari, Firefox) are not downloading an external css file. I am building a python flask app for heroku. I am developing on a local server (both gunicorn and the default flask server). When I load my home page everything seems to load fine except my main stylesheet. The <link> node shows up in Chrome devtools under head.

<link rel="stylsheet" href="/static/main.4dd3f5a6.css" type="text/css">

I can click on the href, and a tab opens with my minified css. However, when I look under the Resources tab, It does not show the stylesheet. One of the possible issues I found online, could be that my local server is serving the css with the wrong Content-Type. However, when I looked under the Network tab to check the Content-Type, the stylesheet doesn't even show up there! I am using Flask-Assets to load my assets. It seems to work fine for my javascript, just not my css. Here is some of the relevant code where I set up webassets.

asset_env = Environment(app)
asset_env.debug = True
asset_env.url = app.static_url_path
asset_env.append_path("assets")

js_bundle = Bundle("js/*", filters="jsmin", output="main.%(version)s.js")
css_bundle = Bundle("css/*", "css/font-awesome-4.1.0/css/font-awesome.css",
                    filters="cssmin", output="main.%(version)s.css")
asset_env.register("js", js_bundle)
asset_env.register("css", css_bundle)

I have also tried deploying to my heroku app (it is not in production) and I have the same issue on their server as on my dev server.

Any ideas?

Answer 1

A bit late to the party, but I had the same problem.

After moving the type attribute to the front of the link statement, it worked.

<link type="text/css" href="{{ ASSET_URL }}" rel="stylesheet">

instead of

<link rel="stylsheet" href="{{ ASSET_URL }}" type="text/css">