MIME类型('text/html')不是受支持的样式表 [英] MIME type ('text/html') is not a supported stylesheet
问题描述
我正在将一个CSS文件链接到我的express-handlebars文件，但出现此错误:
I'm linking a css file to my express-handlebars file but I am getting this error:
拒绝应用来自' http://localhost:4000/cs366/style/draft的样式. css "，因为它的MIME类型('text/html')不是受支持的样式表MIME类型，并且启用了严格的MIME检查.
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
I have the static directory set, and my css is being applied to home.handlebars, but not 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.将快递文件用作static是相对于快递路线path的，而不是实际的文件夹路径.
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.
由于public文件夹中的所有内容均作为静态对象，因此使用绝对路径可使事情变得更容易:
Since everything inside your public folder is served as statice, use absolute path, makes things easier:
<link rel="stylesheet" href="/style/draft.css" />
这篇关于MIME类型('text/html')不是受支持的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
