У меня была эта проблема за последние пару дней, и я не могу понять ее. Мы делаем очень базовое приложение node/express и пытаемся обслуживать наши статические файлы, используя что-то вроде этого:
app.use(express.static(path.join(__dirname, "static")));
Это делает то, что я ожидаю от него по большей части. У нас есть несколько папок в нашей статической папке для наших css и javascript. Мы пытаемся загрузить наш css в наш EJS-просмотр, используя этот статический путь:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Когда мы попадаем в наш маршрут /, мы получаем весь контент, но наш CSS не загружается. Мы получаем эту ошибку, в частности:
Отказался от применения стиля от " http://localhost: 3000/css/style.css ", потому что его тип MIME ("text/html") не поддерживается MIME-типом поддерживаемых стилей, а строгая проверка MIME включена.
Что я пробовал:
- Очистить кеш NPM/Fresh Install
-
npm verify cache -
rm -rf node_modules -
npm install
-
- Очистить кеш браузера
- Различные модификации имен папок и ссылок на
- Добавление/удаление косых черт из href
- Перемещение папки css в корневой каталог и оттуда
- Добавление/удаление
path.join(__dirname, '/static/')изpath.join(__dirname, '/static/') - Был комментарий о сервисном работнике, который, возможно, испортил ситуацию в отчете о выпуске github, и, похоже, решил множество проблем с людьми. Для нашего localhost нет сервисного работника: https://github.com/facebook/create-react-app/issues/658
- Мы не используем реакцию, но я хватаюсь за любой поиск в Google, который я могу найти
Маршрут:
app.get("/", function(req, res) {
res.render("search");
});
Вид:
<!DOCTYPE html>
<html>
<head>
<title>Search for a Movie</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<h1>Search for a movie</h1>
<form method="POST" action="/results">
<label for="movie-title">Enter a movie title:</label><br>
<input id="movie-title" type="text" name="title"><br>
<input type="submit" value="Submit Search">
</form>
</body>
</html>
Пакет.json:
{
"name": "express-apis-omdb",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
"lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
},
"license": "ISC",
"devDependencies": {
"babel-eslint": "^6.0.4",
"csslint": "^0.10.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1"
},
"dependencies": {
"body-parser": "^1.18.2",
"dotenv": "^5.0.0",
"ejs": "^2.5.7",
"express": "^4.13.4",
"morgan": "^1.7.0",
"path": "^0.12.7",
"request": "^2.83.0"
}
}
Структура проекта:
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
Примечание. В настоящее время мы не используем файл макета для нашего EJS.
Я рад предоставить дополнительные данные, если это необходимо.