I'm linking a css file to my express-handlebars file but I am getting this error:
Refused to apply style from 'http://localhost:4000/cs366/style/draft.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I have the static directory set, and my css is being applied to home.handlebars, but not fantasyDraft.handlebars
My file directory
project
|-- public
| `-- style
| |-- home.css
| `-- draft.css
|-- Fantasy
| `-- fantasyRouting.js
|-- views
| |-- fantasyDraft.handlebars
| `-- home.handlebars
|-- app.js
`-- connect.js
App.js
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) => {
res.render('home');
});
//fantasy
app.use('/cs366/fantasy/start', require('./fantasy/fantasyRouting'));
fantasyRouting.JS - Handles the routes for a part of the application to avoid clutter in app.js
const express = require('express');
const router = express.Router();
router.post('/', (req, res) => {
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;
fantasyDraft.handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../style/draft.css">
<title>Document</title>
</head>
<body>
<div class='draft-header'>
<h1>Drafting</h1>
</div>
<div class="tables-container">
<!-- Team table -->
<table id='team-table'>
<th>Name</th><th>OVR</th><th>Postion</th>
<tbody>
</tbody>
</table>
<!-- Draft table -->
<table id='draft-table'>
<th>Name</th><th>OVR</th><th>Postion</th>
<tbody>
{{#each players}}
<tr><td>{{this.name}}</td><td>{{this.ovr}}</td><td>{{this.position}}</td><td><button type='submit' id='draft-player' index={{this.id}}>Draft</button></td></tr>
{{/each}}
</tbody>
</table>
</div>
</body>
</html>
home.handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="../style/home.css">
<title>Homepage</title>
</head>
<body>
<h1>CS-366 Soccer</h1>
<div class='form-container'>
<form action="/cs366/submit" method="POST">
<input type="text" name='input' placeholder="Enter a player or team">
<button type='submit'>Search</button>
</form>
</div>
<div class='fantasy'>
<p>stuff</p>
<form action="/cs366/fantasy/start" method="POST">
<input type="text" id='season' name='teamName' placeholder="Enter your team name">
<button type='submit' id='season'>Start Season</button>
</form>
</div>
</body>
</html>
