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

August 25, 2014 52.5k views
antoine
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;
        }
}
Log In to Comment
6 Answers
asb MOD August 26, 2014

It looks like you might have some sort of an issue with try_files Note that the url is:

http://162.243.30.53/wp-content/themes/twentyfourteen/genericons/genericons.css/?ver=3.0.2

That is displaying html. If you go to:

http://162.243.30.53/wp-content/themes/twentyfourteen/genericons/genericons.css

without the ?ver=3.0.2 you get the actual CSS file.

Reply
jesin September 2, 2014

Andrew is right, the problem is with try_files. Change it to:

try_files $uri $uri/ /index.php?$args;

The $uri variable is not required.

Reply
ines April 12, 2015

Hi,

I have a similar problem with 4 CSS stylesheets:
I'm getting the following errors in the console for my website:

Error: There are multiple templates named 'velvet'. Each template needs a unique name. 1b1a247fc034d5089f331ec9540138ff6afd5f39.js:75:306
The stylesheet http://webmill.eu/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/font-awesome.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/velvet.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/custom.css was not loaded because its MIME type, "text/html", is not "text/css".

It's most likely linked to an nginx config issue and was wondering if the solution you presented would work in my case. Here is my nginx file (/etc/nginx/sites-available/webmill):

# HTTP
server {
    listen 80 default_server; # if this is not a default server, remove "default_server"
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html; # root is irrelevant
    index index.html index.htm; # this is also irrelevant

    server_name webmill.eu; # the domain on which we want to host the application. Since we set "default_server" previously, nginx will answer all hosts anyway.


    # If your application is not compatible with IE <= 10, this will redirect visitors to a page advising a browser update
    # This works because IE 11 does not present itself as MSIE anymore
      if ($http_user_agent ~ "MSIE" ) {
        return 303 https://browser-update.org/update.html;
    }

    # pass all requests to Meteor
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $remote_addr; # preserve client IP
        include       /etc/nginx/mime.types;

        # this setting allows the browser to cache the application in a way compatible with Meteor
        # on every applicaiton update the name of CSS and JS file is different, so they can be cache infinitely (here: 30 days)
        # the root path (/) MUST NOT be cached
        if ($uri != '/') {
            expires 30d;
        }
    }
}

I was wondering if I should have a new location section in the server setup (just like Antoine posted)? I created the config file above exactly as it was in this guide (https://www.digitalocean.com/community/tutorials/how-to-deploy-a-meteor-js-application-on-ubuntu-14-04-with-nginx) but I figured I could make ```
root /usr/share/nginx/html; # root is irrelevant
index index.html index.htm; # this is also irrelevant

relevant so by changing the root to the path where the assets exist? nginx can then serve those directly (with the right headers and a tiny bit change in my config ) without asking the webmill server to do so?

I'm not an expert with this and have been researching extensively so any help is very much appreciated!
Reply
tazisib July 20, 2015

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

Reply
aldrinmagno October 25, 2015

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

Reply
digitaloceande7 April 23, 2016

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.

Reply
Have another answer? Share your knowledge.