Nginx failing to load CSS and JS files (MIME type error)?

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

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

http {     include mime.types;     ...      server {         listen: 80         ...     } 

Answer 2

Try adding this to your /etc/nginx/conf.d/default.conf

location ~ \.css {     add_header  Content-Type    text/css; } location ~ \.js {     add_header  Content-Type    application/x-javascript; }