nginx load css files as a text/plain nginx load css files as a text/plain nginx nginx

nginx load css files as a text/plain


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;    }}


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.


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