16

I'm configuring nginx to load only static files and I don't know why .css files are interpreted as text/plain - finally browser couldn't load it.

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "http://localhost:13000/styles.css".

when I check response header in web browser of css file:

Content-Type: text/plain

I know that on stack we have a lot of issues with it, I've already read them but still doesn't work.

in html file I've just import css:

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

my /etc/nginx/nginx.conf is:

worker_processes        1;
events {
    worker_connections  512;
}

http {
    server {
        listen       80;
        server_name  0.0.0.0:80;
        include /etc/nginx/mime.types;
        root   /project/app;

        location ~* ^.+\.(js|css)$ {
            expires 10d;
        }
    }
}

I tried without any location part or tried with:

location ~ \.css {
 add_header Content-Type text/css;
}

In some responses in other threads I saw that this part is required:

default_type  application/octet-stream;
include       /etc/nginx/mime.types;

I added it in http part and after that in server and then in location, still didn't help me.

Is there anything else what can I do to fix it?

Improve this question
4
  • Found on w3c documentation : In HTML5, the type attribute is no longer required for CSS. Do you still have the problem without type? (URL : w3schools.com/tags/att_style_type.asp) Commented Feb 18, 2019 at 14:54
  • after change into <link href="styles.css" rel="stylesheet"/> error disappeared in browser but css file from nginx is still as a plain/text - css just doesn't work without errors Commented Feb 18, 2019 at 14:58
  • Do you use fastcgi ? If so, this answer may help you : stackoverflow.com/questions/10075304/… (even if the problem seems to be for text/html instead of text/plain) Commented Feb 18, 2019 at 15:07
  • I don't use it, nginx.conf in question is everything what I have, it's simply frontend application without backend Commented Feb 18, 2019 at 15:24

5 Answers 5

Reset to default
31

Just in case somebody has the same problem and use docker. This is key word - I use docker with image nginx:latest which causes problems, I've changed it to nginx:1.14.2 and everything is working fine.

in html, import css:

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

my nginx.conf configuration:

worker_processes        1;
events {
    worker_connections  512;
}

http {
    include    mime.types;
    sendfile on;
    server {
        listen       80;
        server_name  0.0.0.0:80;
        root   /project/app;
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

String "include mime.types;" should be inside the http section, not the server. In the new config, this is the case and therefore works correctly.
just adding : "include mime.types;" and "sendfile on;" worked for me
3

I solved the issue for myself. The problem on my side was the actual nginx configuration, let me explain.

Not working (before):

  • my dockerfile contained this line of code: "COPY deployment/nginx.conf /etc/nginx/nginx.conf"
  • my nginx.conf contained the "http {" part

How I fixed it:

  • I updated my docker file to: "COPY deployment/nginx.conf /etc/nginx/conf.d/default.conf" (check the new path where I am copying)
  • my nginx.conf did not contain any more "http {" block and just the "server {" block. (This works because I am adding a new config file).

Voila! Hope it helps! All in all the culprit was where I was copying the config file and the content of my conf file itself.

Improve this answer

Comments

3

I had a similar issue once on my testing server. what i found out was that nginx was doing every thing in the right way. The problem was the referencing of the files. The browser could find the resources but could not load them from the described base.

location / { # default base
    root /var/www/html/myfiles; # my root folder
    try_files $uri /index.html;
    include  /etc/nginx/mime.types;
}

changed the base to...

location /myfiles { # changed base
    root /var/www/html; # default root folder
    try_files $uri /index.html;
    include  /etc/nginx/mime.types;
}

it worked seamlessly

Improve this answer

Comments

2

I ran into this exact issue where .css files were being served with the text/plain content type, and the browser was refusing to apply the styles.

I went through a long list of troubleshooting steps:

  • Made sure the mime.types file was included in my Nginx config

  • Verified that .css was correctly mapped to text/css

  • Tried different location blocks

  • Double-checked the file paths

  • Even reinstalled Nginx at some point

Still, no luck — Chrome kept showing Content-Type: text/plain in the Network tab, and the styles just wouldn't apply.

After some frustration, I noticed that the network request in Chrome had been cached, and the cached response had the wrong content type. Here's what worked:

I disabled caching in Chrome DevTools (Network tab → "Disable cache"), refreshed the page — and suddenly the CSS was loading correctly with the right text/css content type.

So in my case, it was a caching issue, and all the correct configurations were being ignored because the browser was holding onto an old, incorrect response.

Improve this answer

Comments

0

I had this problem. In order to solve it for both my static javascript and css files was to add type AND uic-remove as followed:

<link rel="stylesheet" uic-remove href="/index.css" type="text/css">
<script uic-remove type="application/javascript" src="./index.js"></script>

Note: The Javascript link was not throwing any warning or error like the css's warning, however it was nonetheless not working either and I thank the heavens that the fix worked for both. Good Luck!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.