Nginx failing to load CSS and JS files (MIME type

Question

I'm getting the following errors on 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".   

After extensive research on the 4 CSS stylesheets failing to load I followed some leads and attempted to fix it by making changes in my nginx file ( /

etc/nginx/sites-available/webmill

) by inserting "include /etc/nginx/mime.types;" under location / { :

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

The /etc/nginx/mime.types file was all correct and properly called in in

/etc/nginx/nginx.conf

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

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # nginx-naxsi config ##
        # Uncomment it if you installed nginx-naxsi
        ##

        #include /etc/nginx/naxsi_core.rules;

        ##
        # nginx-passenger config
        ##
        # Uncomment it if you installed nginx-passenger
        ##

        #passenger_root /usr;
        #passenger_ruby /usr/bin/ruby;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

I must be doing something wrong because it still isn't working. Should I also include "root /usr/share/nginx/html;" in the location section of /etc/nginx/sites-available/webmill ?

Any suggestions are welcome and thanks in advance for any help!

Answer 1

I left out the obvious parts from the config to reduce duplication, this is just the base and you'll need to add the other config from your config, like the listen and the caching part.

server {
  server_name webmill.eu;
  location @proxy {
    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;
  }
  location /css {
    root /home/ines/development/webmill/app/client/css;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location /js {
    root /home/ines/development/webmill/app/client/js;
     # try finding the file first, if it's not found we fall
     # back to the meteor app
    try_files $uri @proxy;
  }
  location / {
    # I know first condition will always fail but i can't do
    # try files with only 1 option;
    try_files $uri @proxy;
  }
}

Answer 2

Tried the verifying the permissions, also checking the try_files . At the end, my layout was returned to normal by adding

"http{
 include /etc/nginx/mime.types;
 sendfile on;
 server {
    listen 443 ssl;
 ....." 

into "http" section of "nginx.conf" file Otherwise, the browser was complaining about css files interpreted as text instead of stylesheets.

Answer 3

Manually including mime.types resolved this for me:

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

Answer 4

Check your nginx.conf! do you have config like this:

include /usr/local/nginx/conf/mime.types;

I fixed this problem by adding this sentence

Answer 5

I changed the owner of the project to root using:

chown root /usr/share/nginx/html/mywebprojectdir/*

and changed permissions using:

chmod 755 /usr/share/nginx/html/mywebprojectdir/*

You can look at my answer here

Answer 6

for anyone else facing this issues, I had this problem and had removed my mime.types include

http {
    include mime.types;
    ...

    server {
        listen: 80
        ...
    }