CSS was not loaded because its MIME type

Question

I use nginx, I have include mime.types and I keep having error when I try access my css files. I tried insert "include /etc/nginx/mime.types;" in "location /" but didn't works.

This is my nginx.conf:

user www-data;
worker_processes 4;
pid /run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {
server_names_hash_bucket_size 64;
upstream test_server {
  server unix:/var/www/test/run/gunicorn.sock fail_timeout=10s;
}

server {
    listen   80;
    server_name ec2-#-#-#-#.sa-east-1.compute.amazonaws.com;

    client_max_body_size 4G;

    access_log /var/www/test/logs/nginx-access.log;
    error_log /var/www/test/logs/nginx-error.log warn;

    location /static/ {
          autoindex on;
        alias   /var/www/test/my-example/static/;
          include /etc/nginx/mime.types;
    }

    location /media/ {
        autoindex on;
        alias   /var/www/test/my-example/media/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        if (!-f $request_filename) {
            proxy_pass http://test_server;
            break;
        }
    }

    #For favicon
    location  /favicon.ico {
        alias /var/www/test/test/static/img/favicon.ico;
    }
    #For robots.txt
    location  /robots.txt {
        alias /var/www/test/test/static/robots.txt ;
    }
    # Error pages
    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/www/test/my-example/static/;
    }
}

}

And head of my html:

<link rel="stylesheet"  type="text/css" href="../static/css/bootstrap.css">
    <link rel="stylesheet"  type="text/css" href="../static/css/combo.css">
    <link rel="stylesheet"  type="text/css" href="../static/css/font-awesome.min.css">
    <link rel='stylesheet' type="text/css" href="../static/css/raleway.css">

But I keep having this error:

was not loaded because its MIME type, "text/plain", is not "text/css"

Possible duplicate of [Nginx fails to load css files](http://stackoverflow.com/questions/10075304/nginx-fails-to-load-css-files) — J. Titus, Aug 16 '16 at 21:10
@J.Titus Did you read when I say "I have include mime.types? — Daniela Morais, Aug 16 '16 at 22:10
@DanielaMorais Did you look at the answer of the linked question? I don't see that in your conf file. — J. Titus, Aug 16 '16 at 22:14
@J.Titus Of course I tried do this before post here (include in location / and not in location /static/). — Daniela Morais, Aug 16 '16 at 22:16

score 6 · Accepted Answer · answered Aug 17 '16 at 08:25

It is usual to place include mime.types; inside the outer http { ... } block, rather than inside a location { ... } block, so that it is system-wide and inherited by all server { ... } blocks and all locations.

Your href="../static/css/ statement is relative, so from the information you provide, we cannot tell whether the URI is being processed by the location /static/ block or the location / block.

You do not have a root (or alias) defined for the location / block, so the false condition of the if (!-f $request_filename) statement will probably always fail with 404.

You may want to set root /var/www/test/my-example in the server { ... } block and allow it to be inherited by some location blocks. The use of alias where a root can be used is discouraged - see this document.

If your CSS files are being served through the proxy_pass http://test_server; then this is the wrong place to be fixing the MIME type.

score 0 · Answer 2 · answered Jun 02 '17 at 16:32

0

Another way to do it is modifying /etc/nginx/mime.types and put

    types {
    ....
    text/css     css plain;
    ....
   }

answered Jun 02 '17 at 16:32

engel

11
4

CSS was not loaded because its MIME type

2 Answers2