title: MIME type error for local CSS or JS prevents loading custom styles when working with NodeJs
body: <p>I am racking my brain the whole week on this error now!
  My plan was to create a simple <strong>'send email from nodejs' application</strong>. The problem that I ran into was, a <strong>mime-type error</strong> for my <strong>style.css</strong>. The error says it's is in a <strong>text/html</strong> format.
  I started as usual with 'npm init -y' and 'npm install express nodemailer nodemailer-mailgun-transport -S'.
  I also created a 'server.js', 'index.html' and 'style.css' (See code below).
  And that's it. The application works as expected and linking bootstrap cdn also works. It is only my custom css that gives me a hard time. So to simplify it I even took a copy/paste html template from <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_internal" rel="nofollow noreferrer">w3schools</a></p>
  <p>index.html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt; 
      &lt;h1&gt;This is a heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph.&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>style.css</p>
  <pre><code>body {
    background-color: powderblue;
  }
  h1 {
    color: blue;
  }
  p {
    color: red;
  }
  </code></pre>
  <p>server.js</p>
  <pre><code>const express = require('express');
  const app = express();
  const PORT = 8080;
  const path = require('path');
  
  app.get('/', (req, res) =&gt; {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
  })
  
  app.listen(PORT);
  </code></pre>
  <p>package.json</p>
  <pre><code>{
    &quot;name&quot;: &quot;SendMail&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;express&quot;: &quot;^4.17.1&quot;,
      &quot;nodemailer&quot;: &quot;^6.4.15&quot;,
      &quot;nodemailer-mailgun-transport&quot;: &quot;^2.0.1&quot;
    },
    &quot;style&quot;: &quot;style.css&quot;
  }
  </code></pre>
  <p>The error in Chrome:
  <a href="https://i.stack.imgur.com/bcCoH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bcCoH.png" alt="Error in chrome" /></a></p>
  <p>What I've tried:</p>
  <ul>
  <li>Isolating the html/css part to make sure the code is alright. Yes, it is!</li>
  <li>experimenting around with the style link. Including this workaround: <a href="https://stackoverflow.com/a/45119502/12272930">https://stackoverflow.com/a/45119502/12272930</a></li>
  <li>Change the mime-type via javascript like: <a href="https://stackoverflow.com/q/50429529/12272930">Style and javascript files not applied to page that is serving HTML in Node.js</a></li>
  <li>Attaching a style section in package.json as shown above</li>
  </ul>
  <p>Edit: Inline styling and JS works as expected. I am guessing that it has something to do with express.</p>
  <p>Is there anything else that I could try?
  Let me know if you need additional info. Thanks in advance!</p>