Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-25T10:23:11.210Z
Answers.LastActivityDate: 2016-02-25T10:23:11.210Z
Answers.UserDisplayName: chris
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-04-05T21:16:45.250Z
Answers.LastActivityDate: 2017-04-05T21:16:45.250Z
Answers.UserDisplayName: Brad Bell
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-02-25T18:21:10.813Z
Answers.LastActivityDate: 2016-02-25T18:21:10.813Z
Answers.UserDisplayName: hvs
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-02-25T11:03:36.297Z
Comments.Text: 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?
Comments.UserDisplayName: Andris Sevcenko
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-02-25T17:40:47.253Z
Comments.Text: Would also be curious why you'd want to load your site's CSS files over S3.
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-02-25T19:19:04.527Z
Comments.Text: @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.)
Comments.UserDisplayName: RitterKnight
Tags: <assets>
Title: CSS uploaded to S3 is not rendering in the browser
ThreadText: # 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
  
  ```
  <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?
  
  **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**: @username_2: 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?
  
  
  ---
  
  