CODEWITHSUNDEEP
cssnode.jsexpresshandlebars.jsexpress-handlebars
ajjohnson190
ajjohnson190

Reputation: 513

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

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>

Upvotes: 11

Views: 41629

Answers (1)

1565986223
1565986223

Reputation: 6718

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" />

Upvotes: 14

Related Questions