我正在将一个 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>
最佳答案
因为相对路径，您的 html 无法找到正确的 css。 express 文件作为 static 是相对于 express 路线 path 而不是实际的文件夹路径。
由于 public 文件夹中的所有内容都是静态的，因此使用绝对路径，使事情变得更容易:
<link rel="stylesheet" href="/style/draft.css" />
关于css - MIME 类型 ('text/html' ) 不是受支持的样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55882824/