Question

CSS files not interpreted by the client's browser. I think my NGINX config is not good.

  • Posted on August 25, 2014
  • antoineAsked by antoine

Hi guys,

I’m configuring a droplet to host multiple Wordpress sites.

I bought a droplet with Ubuntu 14.04.

Then I followed this tutorial : https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-14-04

Then this one : https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-14-04

Finally : https://www.digitalocean.com/community/tutorials/how-to-install-wordpress-with-nginx-on-ubuntu-14-04

When I visit my website, everything seems to work except the CSS.

Here is the output of my Google Chrome’s console :

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/genericons/genericons.css/?ver=3.0.2". 162.243.30.53/:23

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/style.css/?ver=3.9.2". 162.243.30.53/:24

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-includes/js/jquery/jquery.js/?ver=1.11.0". 162.243.30.53/:28

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-includes/js/jquery/jquery-migrate.min.js/?ver=1.2.1". 162.243.30.53/:29

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

Resource interpreted as Script but transferred with MIME type text/html: "http://162.243.30.53/wp-content/themes/twentyfourteen/js/functions.js/?ver=20140319". 162.243.30.53/:136

Uncaught SyntaxError: Unexpected token < 162.243.30.53/:1

I found on Google that the problem must come from the http headers or something like that and I found somewhere (StackOverFlow I think) that I should add

include /etc/nginx/mime.types;

to my location / { … } block.

Here’s the result :

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;

    root /var/www/lesmauvaisgarcons.ca/html;
    index index.php index.html index.htm;

    # Make site accessible from http://localhost/
    server_name XXX.XXX.XX.XX;

    location / {
        	try_files $uri $uri/ /index.php?q=$uri&$args;
        	include /etc/nginx/mime.types;
	}

	error_page 404 /404.html;
	error_page 500 502 503 504 /50x.html;
	
	location = /50x.html {
        	root /usr/share/nginx/html;
    	}

	location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php5-fpm.sock;
                fastcgi_index index.php;
                include fastcgi_params;
        }
}

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

This is a pretty old thread by now, but I just got a similar issue.

From this example it would appear that you should include mime.type in the html section and not the location section.

Hello,

Did solve your problem Antoine? I’m currently experiencing the same situation and have not clue what is going on, I already add include /etc/nginx/mime.types; but with no luck.

The only difference is I’m using nginx as a proxy behind it is apache.

Thanks,

Aldrin

Did you find any solution Antoine and Ines, ? I have the exact same issue and have no clue where it’s coming from