1

I have created a separate asset source to upload my css on Amazon S3 cloud service. Initially, it was not allowing me to upload the files to S3. After adding CSS in the extraAllowedFileExtensions in the config>general.php file, I was able to upload the CSS file.

Here is the code in the template to load the css

<head>

{% for cssfile in craft.assets.source('css') %}
        <link rel="stylesheet" type="text/css" href="{{ cssfile.url }}" />
{% endfor %}

I can see the link tags for each CSS file in the HTML source code, the URL is functional. However, browser refuses to render those files. If I go into chrome console>sources, I can see all the CSS files listed there but they are empty!

When I create a new css asset source locally on the server, everything works (without changing anything inside the template)

I am really confused. I have never ever encountered a problem where browser refuses to read the css file.

Other assets such as js, images etc are loading properly from amazon S3. The only issue seems to be with css

Any ideas?

| improve this question | |
  • 1
    What content-type headers is S3 sending back? It's possible that your server is not providing the correct Content-type information when uploading to S3 and so you're not getting text/css content type back. Also, why would you use Assets to manage CSS files? – Andris Sevcenko Feb 25 '16 at 11:03
  • 1
    Would also be curious why you'd want to load your site's CSS files over S3. – Brad Bell Feb 25 '16 at 17:40
  • @Brad: I'm guessing the OP wants to use it like a poor man's CDN? But I agree with you... S3 doesn't need to be the origin server; a better option is if you use Cloudfront, it'll do the origin pull from your own server for you if you just reference the file. (True of any CDN these days really.) – RitterKnight Feb 25 '16 at 19:19
3

Have you added the css content-type on S3? You can check this in the console > network tab

s3cmd put -m "text/css" $YOUR_PATH s3://$BUCKET/$YOUR PATH

| improve this answer | |
1

Ultimately Craft 2 and S3 end up using Yii's CFileHelper::getMimeType() to determine what to set the Content-Type header to when saving a file to S3.

As you can see in the link, if finfo is installed, it will call finfo_open with the FILEINFO_MIME_TYP flag to get the mime type back from the file.

And it just so happens that finfo is really bad at guessing the mime type for a CSS file: https://bugs.php.net/bug.php?id=53035

There are the usual headers and markers it can use like in other file formats, since it's basically just another text file.

Good news is that this works as expected on the upcoming Craft 3 and it's not an issue, probably because we've swapped everything over to use Flysystem.

| improve this answer | |
0

Wow! I am not sure what happened but I need 50 reputation points to even post a comment on my own thread.

So I am going to put my comments as an answer:

It is indeed content-type issue. However, the problem is still a Craft problem because the css file uploads are taking place via Craft's UI. I believe that the PUT object API calls via Craft's UI are not sending the correct Content-Type headers for the css files. When I use a third party provider to upload the css file to S3 bucket, the problem disappears.

How to fix this?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.