CSS not loading correctly when deployed in /public

Hi here’s another “my css isn’t working!!” post but i assure you it’s different this time. I’ve tried all different things for baseURL (“”, “/”, “https://andrewjm.me”) and nothing worked, so i investigated in inspect element and the browser is properly receiving the stylesheets that are linked in index.html, but it’s not applying or “running” them. I know this because when i edit one inside of inspect element, it applies it but it just refuses to apply the css on the initial load of the page. what’s more, one sheet (vncnt.css) @imports another (barebones.css, not linked on index.html) but the browser never even requests barebones.css from the server. This is not a browser issue as i have tried it on 4 different browsers.

see for yourself at https://andrewjm.me

Thanks in advance.

See what your browser’s developer tools tell you about your style sheets. My best bet is that your server is set up so that it delivers .css as text/html.

This is not a Hugo issue, the CSS is there. But your browser refuses to load it because the MIME type it is delivered with does not match the one needed for style sheets.

1 Like

As @chrillek says, the css is being delivered with a mime type of html, not css. I’d take Cloudflare out of the loop for starters, as I imagine it’s a misconfiguration there. I wouldn’t bother putting a site behind Cloudflare while in development, it’s ony going to add complication.

This was the answer. Thank you so much :slight_smile:

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.