NGINX+wordpress: CSS being served but not applied

Question

Cheers fellow stackers,

I kinda have to get wordpress running in a self hosted nginx environment.

More or less exactly using the suggested config from NGINX wordpress doc.

server {
    listen 443 ssl;
    server_name _;
    ssl_certificate /var/lib/nginx/PKI/www/server/cert.pem;
    ssl_certificate_key /var/lib/nginx/PKI/www/server/key.pem;
    root /var/lib/nginx/www/wordpress;
    index index.php;
    location / {
            try_files $uri uri/ /index.php?$args;

    }
    location ~ \.php$ {
        include /etc/nginx/fastcgi_params;
        fastcgi_intercept_errors on;
        fastcgi_pass php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
            expires max;
    }
}

Everything works mostly as expected, except for the styling.

(changed background color for visibility)

Also broken on the actual site:

(changed background color for visibility)

Inside of the admin dashboard, everything looks fine.

CSS files are being served properly by NGINX.

Answer 1

My nginx config did not include the mime.types defaults.

That seems to be affecting the nginx "Content-Type" response header, leading to it being "text/plain" instead of "text/css" ...

... which is unfortunate because none of the wordpress templates specify the content type in the request, e.g:

<link rel='stylesheet' id='wp-block-library-css'  href='https://censored.net/wp-includes/css/dist/block-library/style.css?ver=5.8' media='all' />

Should probably look anything like this, but oh well

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