Тип MIME ('text / html') не поддерживается таблицей стилей - PullRequest
Новая
       14

Тип MIME ('text / html') не поддерживается таблицей стилей

2 голосов
/ 27 апреля 2019

Я связываю файл css с файлом экспресс-руля, но получаю эту ошибку:

Отказался от применения стиля из 'http://localhost:4000/cs366/style/draft.css', потому что его тип MIME ('text / html ') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

У меня установлен статический каталог, и мой 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>

1 Ответ

1 голос
/ 28 апреля 2019

Из-за относительного пути ваш html не может найти правильный css. Для экспресс-файлов static относится к экспресс-маршруту path, а не к фактическому пути к папке.

Поскольку все, что находится в вашей папке public, используется в качестве статистики, используйте абсолютный путь, что упрощает задачу: 

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