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

半腔热情 提交于 2019-12-20 02:02:05

问题


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>

回答1:


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 statice, use absolute path, makes things easier:

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


来源:https://stackoverflow.com/questions/55882824/mime-type-text-html-is-not-a-supported-stylesheet

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!