MIME type ('text/html') is not a supported stylesheet

Question

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>

<link rel="stylesheet" href="../style/draft.css" /> just remove type — fedesc

1565986223 1565986223 · Accepted Answer · 2019-04-28T04:51:57

It's because of relative path that your html is unable to find the correct css. With express files served as static is relative to express route path not actual folder path.

Since everything inside your public folder is served as static, use absolute path, makes things easier:

<link rel="stylesheet" href="/style/draft.css" />

MIME type ('text/html') is not a supported stylesheet

1 Answers