in web server development on September 17, 2014
Recently I had some issues with CSS files throwing up weird symbols when I updated the said files. Turns out there was a quick and easy solution.
You’ve seen them before; Non UTF-8 characters being displayed on your lovely UTF-8 web page, resulting in these little buggers popping up: ����
Recently I noticed this few low-key side projects. When I updated the CSS files, I was having a whole bunch of these hair pullers appearing for no reason. I thought my first problem was due to the pre-processor I was using (PrePos). However, switching back to CodeKit didn’t help and neither did using the online SASS processor. Eventually, I figured out the issue was due to the Nginx sever configuration file.
I discovered the solution when the CSS file I was applying changes to, was partially showing code from an old version of the said file. This old code was followed by the infamous diamonds and finally, by the latest CSS code changes. Safe to say my mind was blown by this. However, it did help me figure out that the issue wasn’t with the CSS file, but rather the Nginx system as was easy to fix:
Inside the file
/etc/nginx/nginx/conf I had the setting
sendfile set to
on;. Changing this to
off; fixed the issue for me, after restart the Nginx service of course.
So if you’re running a Nginx server and your CSS files are being riddled by the infamous � black-diamond-question-mark symbols, try turning off the ‘sendfile’ setting in your Nginx conf. It may help you from ripping your hair out of your head trying to find the cause of the triangles.