CSS not taking effect in live site, working in server mode

support
1

Hey folks. I’m trying to figure out why some CSS I added to my site isn’t taking effect on my live site (| Mailing List) but it is working as expected in the dev server mode. Here’s what I’ve noticed and tried so far:

  • On the live site, I checked in the developer console and I don’t see any errors.
  • I can follow the CSS in the head tag of live and it comes up the same as in local server mode.
  • I downloaded the above page and did a diff against the local version. The only differences are some references down the page that include the domain name, but they appear unrelated.
  • The computed style in local includes the CSS properties I’ve listed
  • If I make any changes to the CSS in my theme directly, it loads fine locally, but completely breaks in my live site.
  • I’m using the anatole theme
  • My custom CSS is in /assets/css/mailchimp.css
  • config.toml has this set: customCss = [“css/mailchimp.css”]
  • I am not using the theme as a submodule, I downloaded it and copied it into the directory to avoid having any submodule issues.
  • I tried removing the integrity check as well as minification, it did not help
  • version: hugo v0.123.8-5fed9c591b694f314e5939548e11cc3dcb79a79c+extended darwin/arm64 BuildDate=2024-03-07T13:14:42Z VendorInfo=brew

So… yeah. I’m pretty confused. I don’t understand how the site would load without errors, the CSS is visible, & can curl’ed without issue, but only work in the local environment. It’s like it’s silently being ignored. Also weird is that any changes to the CSS in the theme completely break the site.

Thanks in advance for any ideas.

2

This seems like an S3 config problem.

Screenshot-20240312200309-1221x465
Screenshot-20240312200309-1221x4651221×465 34.9 KB

3

Hmm… very weird. I wonder why the other CSS works correctly? At least, it works correctly until it’s modified, then it has the same problem. I’ll look into setting the Content-Type.

4

The other CSS works correctly because it is being served with the correct content-type header.

5

OK. I’m not sure why the old content had the correct Content-Type, I don’t remember setting it, but it’s possible I did it several years ago, or before I started using CloudFront.

For future reference, I created a CloudFront response header policy and behavior to take anything served out of /css and add the correct Content-Type.

Thank you for your help! I don’t know how long it would have taken me to figure out the Content-Type issue.

6

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