Nginx finds css but doesn't load it into index.html

Question

my nginx server serves an index.html file, which loads a css file and some js files. the css file is loaded (NO 404), but the style doesn't appear.

folders :

/src
    /assets
        /images
            ...
        /sounds
            ...
    /css
        /style.css
    /js
        ...
    index.html

sound and images loaded by the js files work perfectly.

/etc/nginx/sites-enabled/default/ :

server {
  listen 8080;
  server_name jumpnrun jumpnrun.vm;
  access_log /var/log/nginx/jumpnrun.access.log;
  error_log /var/log/nginx/jumpnrun.error.log;

  location / {
    try_files $uri $uri/index.html;
  }

  location ~ ^/(assets/|css/|js/|index.html) {
    root /src;
    index index.html;
    access_log off;
  }

  location /socket.io {
    add_header Access-Control-Allow-Origin *;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_http_version 1.1;
    proxy_pass http://node-server;
  }

}

index.html :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Jump n' Run</title>
        <link href="css/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <canvas id="game" width='1000' height='500'></canvas>
        <button class="sound"></button>
    </body>
    <!-- JS -->
</html>

if i go to localhost:8080 it gives me the index page but without any styling and the dev tools doesn't show me any errors.

thanks for your help!

EDIT:

The whole thing is in a docker container.. Now every time i browse to localhost:8080 nginx dies. error log is somehow not accessible..

velveteer · Accepted Answer · 2015-05-15 16:54:53Z

15

I had a similar problem and resolved it by making sure the http block in my nginx.conf was loading the proper mime.types mappings:

http { 
    include /etc/nginx/mime.types;
}

answered May 15, 2015 at 16:54

velveteer

6285 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

stolli Over a year ago

I had same problem, same solution. Note that if you want to keep your types explicit, or don't want to rely on the mime.types file, you can just harvest types out of that file into a 'types { }' block in your .conf.

Marco Lavagnino Over a year ago

If it didn't work in the http block, try loading the mime types in server blocks.

yngwietiger Over a year ago

It worked for me just by putting in the http block. I also had to remember to do a Ctrl+Reload for it to take effect. Thanks.

lmiller1990 Over a year ago

This worked for me! Thanks. Surprised this was not the default.

JeevanReddy Avanaganti · Accepted Answer · 2015-10-04 10:41:06Z

1

try adding @charset "UTF-8";

at the top of css file it worked for me. hope it works for you

answered Oct 4, 2015 at 10:41

JeevanReddy Avanaganti

912 silver badges8 bronze badges

Collectives™ on Stack Overflow

Nginx finds css but doesn't load it into index.html

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related