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

<p><code>s3cmd put -m "text/css" $YOUR_PATH s3://$BUCKET/$YOUR PATH</code></p>

CC BY-SA 3.0
2016-02-25T10:23:11.210Z
2016-02-25T10:23:11.210Z
chris
<p>Ultimately Craft 2 and S3 end up using Yii's <a href="https://github.com/yiisoft/yii/blob/1.1.17/framework/utils/CFileHelper.php#L280" rel="nofollow noreferrer">CFileHelper::getMimeType()</a> to determine what to set the Content-Type header to when saving a file to S3.</p>

<p>As you can see in the link, if <a href="https://secure.php.net/manual/en/ref.fileinfo.php" rel="nofollow noreferrer">finfo</a> is installed, it will call <code>finfo_open</code> with the <code>FILEINFO_MIME_TYP</code> flag to get the mime type back from the file.</p>

<p>And it just so happens that finfo is really bad at guessing the mime type for a CSS file: <a href="https://bugs.php.net/bug.php?id=53035" rel="nofollow noreferrer">https://bugs.php.net/bug.php?id=53035</a></p>

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

<p>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 <a href="https://flysystem.thephpleague.com" rel="nofollow noreferrer">Flysystem</a>.</p>

CC BY-SA 3.0
2017-04-05T21:16:45.250Z
2017-04-05T21:16:45.250Z
Brad Bell
<p>Wow! I am not sure what happened but I need 50 reputation points to even post a comment on my own thread.</p>

<p>So I am going to put my comments as an answer:</p>

<p>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.</p>

<p>How to fix this?</p>

CC BY-SA 3.0
2016-02-25T18:21:10.813Z
2016-02-25T18:21:10.813Z
hvs
<p>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 <code>extraAllowedFileExtensions</code> in the <code>config&gt;general.php</code> file, I was able to upload the CSS file. </p>

<p>Here is the code in the template to load the css</p>

<pre><code>&lt;head&gt;

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

<p>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 <code>console&gt;sources</code>, I can see all the CSS files listed there but they are empty!</p>

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

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

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

<p>Any ideas?</p>

CC BY-SA 3.0
2016-02-25T11:03:36.297Z
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
CC BY-SA 3.0
2016-02-25T17:40:47.253Z
Would also be curious why you'd want to load your site's CSS files over S3.
Brad Bell
CC BY-SA 3.0
2016-02-25T19:19:04.527Z
@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
<assets>
CSS uploaded to S3 is not rendering in the browser
# CSS uploaded to S3 is not rendering in the browser

(Asked by: username_0 on 2016-02-25)

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


{% for cssfile in craft.assets.source('css') %}
        
{% 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?

**Tags:** assets
> **Comments:**
> **username_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?  
> **username_2**: Would also be curious why you'd want to load your site's CSS files over S3.  
> **username_3**: @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.)  

---

## 3 answers

### Answer by username_4 on 2016-02-25. Score: 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`


---

### Answer by username_2 on 2017-04-05. Score: 1

Ultimately Craft 2 and S3 end up using Yii's [CFileHelper::getMimeType()](https://github.com/yiisoft/yii/blob/1.1.17/framework/utils/CFileHelper.php#L280) 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](https://secure.php.net/manual/en/ref.fileinfo.php) 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](https://flysystem.thephpleague.com).


---

### Answer by username_5 on 2016-02-25. Score: 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?


---

