Nginx: Correctly setting the mime type for gzipped styles/scripts

Question

I have a gzip-compressed style and scripts in files:

/scripts.js.gz
/styles.css.gz

The problem is that it does not serve the correct mime-type and browser does not recognize, that the files are compressed css or js (browser recognize the type as application/octet-stream, where it should be text/css or so).

I tried adding the following to mime.type of nginx, but with no effect. I suppose, it does not recognize, that the file is compressed.

types {
    text/css                                css.gz;
    application/x-javascript                js.gz;
}

When trying to access the files, the browser handle the files as files to download and not to present.

Answer 1

I had the same problem, coming from Apache. The problem I found is, the types block does not allow you to specify .css.gz as a file extension. However, the location block does! My solution is to make a location for .css.gz and then modify the content type for .gz within that location, like this:

location ~ \.css\.gz$ {

   add_header  Content-Encoding  gzip;
   gzip off;
   types {
     text/css gz;
   }
}