title: MIME type ('text/html') is not a supported stylesheet
body: <p>I'm linking a css file to my express-handlebars file but I am getting this error:</p>
  
  <blockquote>
    <p>Refused to apply style from '<a href="http://localhost:4000/cs366/style/draft.css" rel="noreferrer">http://localhost:4000/cs366/style/draft.css</a>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.</p>
  </blockquote>
  
  <p>I have the static directory set, and my css is being applied to home.handlebars, but not fantasyDraft.handlebars</p>
  
  <p><strong>My file directory</strong></p>
  
  <pre><code>project
  |-- public
  |   `-- style
  |       |-- home.css
  |       `-- draft.css
  |-- Fantasy
  |   `-- fantasyRouting.js
  |-- views
  |   |-- fantasyDraft.handlebars
  |   `-- home.handlebars
  |-- app.js
  `-- connect.js
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>const express = require('express');
  var exphbs  = require('express-handlebars');
  const db = require('./connect'); //connnect to db
  const path = require('path');
  const app = express();
  
  
  //middleware
  app.use(express.urlencoded({extended: false}));
  
  //static folder
  app.use(express.static(path.join(__dirname, '/public')))
  
  //handlebars middleware
  app.engine('handlebars', exphbs({defaultLayout: null}));
  app.set('view engine', 'handlebars');
  
  
  //home
  app.get('/cs366', (req, res) =&gt; {
      res.render('home');
  });
  
  //fantasy
  app.use('/cs366/fantasy/start', require('./fantasy/fantasyRouting'));
  </code></pre>
  
  <p><strong>fantasyRouting.JS - Handles the routes for a part of the application to avoid clutter in app.js</strong></p>
  
  <pre><code>const express = require('express');
  const router = express.Router();
  
  router.post('/', (req, res) =&gt; {
  
  
  
      players = [
          {
              id: 1,
              name: 'Alex Johnson',
              position: 'p10',
              ovr: 60
          },
          {
              id: 2,
              name: 'Carl Erdman',
              position: 'p2',
              ovr: 76
          },
          {
              id: 3,
              name: 'Joe Enslin',
              position: 'p1',
              ovr: 29
          }
      ]
  
      res.render('fantasyDraft', {
          players: players
      });
  
  
  
  });
  
  module.exports = router;
  </code></pre>
  
  <p><strong>fantasyDraft.handlebars</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="../style/draft.css"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class='draft-header'&gt;
          &lt;h1&gt;Drafting&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div class="tables-container"&gt;
  
          &lt;!-- Team table --&gt;
          &lt;table id='team-table'&gt;
              &lt;th&gt;Name&lt;/th&gt;&lt;th&gt;OVR&lt;/th&gt;&lt;th&gt;Postion&lt;/th&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
  
          &lt;!-- Draft table --&gt;
          &lt;table id='draft-table'&gt;
              &lt;th&gt;Name&lt;/th&gt;&lt;th&gt;OVR&lt;/th&gt;&lt;th&gt;Postion&lt;/th&gt;
              &lt;tbody&gt;
                  {{#each players}}
                      &lt;tr&gt;&lt;td&gt;{{this.name}}&lt;/td&gt;&lt;td&gt;{{this.ovr}}&lt;/td&gt;&lt;td&gt;{{this.position}}&lt;/td&gt;&lt;td&gt;&lt;button type='submit' id='draft-player' index={{this.id}}&gt;Draft&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;
                  {{/each}}
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>home.handlebars</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../style/home.css"&gt;
      &lt;title&gt;Homepage&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;h1&gt;CS-366 Soccer&lt;/h1&gt;
  
      &lt;div class='form-container'&gt;
          &lt;form action="/cs366/submit" method="POST"&gt;
              &lt;input type="text" name='input' placeholder="Enter a player or team"&gt;
              &lt;button type='submit'&gt;Search&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class='fantasy'&gt;
          &lt;p&gt;stuff&lt;/p&gt;
          &lt;form action="/cs366/fantasy/start" method="POST"&gt;
              &lt;input type="text" id='season' name='teamName' placeholder="Enter your team name"&gt;
              &lt;button type='submit' id='season'&gt;Start Season&lt;/button&gt;
          &lt;/form&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>