title: A Stylesheet is not being displayed due to its MIME type not being supported, though the MIME type appears blank when debugging
body: <p>When trying to apply a style to a specific page on a website (The exact same style works elsewhere on the webserver), I receive the following error</p>
  
  <blockquote>
    <p>Refused to apply style from 'style.css' because its MIME type ('') is not a supported stylesheet MIME type, and strict MIME checking is enabled.</p>
  </blockquote>
  
  <p>I've tried running the file locally, while only importing the file into HTML and it works perfectly fine. I've also tried this on the same webserver on a blank page, and again, it works perfectly fine.</p>
  
  <p>I've also replaced the file due to worries of it being the encoding of the file, and I've removed all comments from the file (<a href="https://stackoverflow.com/a/48270432/10595994">As per this answer</a>).</p>
  
  <p>The entire contents of the CSS file is as follows</p>
  
  <pre><code>#Main_ctl01_lst {
      width: 320px;
  }
  
  #Main_ctl02_txt{
      height: 25px;
      width: 200px;
  }
  
  #Main_ctl03_txt {
      width: 250px;
  }
  
  .label #Main_ctl04_lbL:fter  { 
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  .label #Main_ctl05_lbl:after {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  .label #Main_ctl06_lbl:after {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  .label #Main_ctl07_lbl:after {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  .label #Main_ctl08_lbl {
      font-size: 0;
  }
  
  .label #Main_ctl09_lbl:before {
      content: "Content";
      font-family: inherit;
      font-size: 9pt;
  }
  
  .label #Main_ctl010_lbl:after {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  .label #Main_ctl110_lbl {
      font-size: 0;
  }
  
  .label #Main_ctl11_lbl:before {
      content: "Content";
      font-family: inherit;
      font-size: 9pt;
  }
  
  .label #Main_ctl13_lbl:after {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
      color: red;
  }
  
  /* Line 3*/
  .label #Main_ctl114_lbl {
      font-size: 0;
  }
  
  .label #Main_ctl115_lbl:before {
      content: "*";
      font-family: inherit;
      font-size: 9pt;
  }
  
  
  /* Line 4*/
  .label #Main_ctl16_lbl {
      font-size: 0;
  }
  
  .label #Main_ctl17_lbl:before {
      content: "Content";
      font-family: inherit;
      font-size: 9pt;
  }
  
  
  .label #Main_ctl118_lbl {
      display: none;
  }
  
  .input #Main_ctl19_dp {
      display: none;
  }
  
  .input1 {
      visibility: hidden;
  }
  
  .input2 {
      display: none;
  
  }
  
  .label {
      display: none;
  }
  
  body {
      background-image: url(https://example.com/image.png); 
      background-color: rgb(255,0,0); 
      background-color: #FF0000; 
  }
  
  </code></pre>
  
  <p>and the header code of the web page</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="/Content/jquery-1.9.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="/Content/jquery-ui-1.8.14.custom.css"&gt;
      &lt;script src="/Content/jquery-ui-1.8.14.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Content/Test.Scripts.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Content/Reflection.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Content/CollapsibleCheckBoxList.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Content/Scripts.jQuery.Extensions.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link rel="shortcut icon" media="all" type="image/x-icon" href="/Content/favicon.ico"&gt;
      &lt;script type="text/javascript" src="/content/jquery.autotab-1.1b.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/content/jquery.calculation.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/content/jquery.format.1.05.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/App_Templates/FrontEnd.Test/TestScript.js"&gt;&lt;/script&gt;
      &lt;link href="/App_Templates/Common/_Reset.css" type="text/css" rel="stylesheet"&gt;
      &lt;link href="../App_Templates/FrontEnd.Test/Standard.css" type="text/css" rel="stylesheet"&gt;
      &lt;link href="../App_Templates/FrontEnd.Test/Template.css" type="text/css" rel="stylesheet"&gt;
      &lt;link href="/App_Templates/Common/Menus.css" type="text/css" rel="stylesheet"&gt;
      &lt;!--[if lte IE 8]&gt;
          &lt;link href="../App_Templates/Common/IE8.css" rel="stylesheet" type="text/css" /&gt;
      &lt;![endif]--&gt;
      &lt;link href="/WebResource.axd?d{{removed}}" type="text/css" rel="stylesheet"&gt;&lt;link type="text/css" href="/s3?Styles.CssFile/{{culprit_file}}.css&amp;{{removed}}" rel="stylesheet"&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>If the script works as intended, I expect to see a red background. As previously stated, this is the case elsewhere, but not on this specific webpage.</p>
  
  <p>In reality, nothing in the file is loaded due to the MIME type issue.</p>