MIME 类型 ('text/html') 不是受支持的样式表

Question

我正在将一个 css 文件链接到我的 express-handlebars 文件，但出现此错误：

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.

我设置了静态目录，我的 css 被应用到 home.handlebars，但不是 fantasyDraft.handlebars

我的文件目录

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 - 处理部分应用程序的路由以避免 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>

Answer 1

由于相对路径，您的html无法找到正确的css。快递文件作为 static 是相对于快递路线 path 而不是实际的文件夹路径。

由于 public 文件夹中的所有内容都是静态的，因此请使用绝对路径，使事情变得更容易：

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

MIME 类型 ('text/html') 不是受支持的样式表

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

css

node.js

express

handlebars.js

express-handlebars