When attempting to link a css file to my express-handlebars file, I encountered the following error:
The style from 'http://localhost:4000/cs366/style/draft.css' was refused due to its MIME type ('text/html') not being a supported stylesheet MIME type, with strict MIME checking enabled.
Even though my static directory is set up correctly and the css is working on home.handlebars, it is not being applied to fantasyDraft.handlebars
Directory Structure
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 - Routes management
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>