拒绝应用来自 'http://localhost:3000/css/style.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型
[英]Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type
问题描述
I am just creating an example website template, and am getting this error in the Chrome console:
我只是在创建一个示例网站模板，并在 Chrome 控制台中收到此错误：
Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I am getting a 404 error when trying to load the css/style.css page, but the path seems correct.尝试加载 css/style.css 页面时出现 404 错误，但路径似乎正确。 Below is some of the basic code for the site:以下是该网站的一些基本代码：
App:应用程序：
var express = require('express');
var app = express();
var exphbs = require('express-handlebars');
var path = require('path');
app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static(path.join(__dirname, "static")));
app.get('/', function(req, res) {
res.render('resume.hbs')
})
app.listen(3000)
HTML: HTML：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<link rel="stylesheet" href="..\css\style.css" type = "text/css">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
CSS: CSS：
h1 {
color: blue
}
Below are what the folders look like, which shows the path.下面是文件夹的样子，其中显示了路径。 I cannot seem to find a way to fix this.我似乎找不到解决此问题的方法。 Any ideas?有任何想法吗？
6 个解决方案
解决方案1
2 2018-07-02 20:55:35
This is likely just caused by not having the expected path.这可能只是由于没有预期的路径造成的。
You're using this line here:你在这里使用这条线：
app.use(express.static(path.join(__dirname, "static")));
So in this case, you need a folder named "static" and inside that folder you can put your css and images.所以在这种情况下，您需要一个名为“static”的文件夹，并且在该文件夹中您可以放置您的 css 和图像。 You would be able to link to them as follows:您可以按如下方式链接到它们：
<link rel="stylesheet" href="/css/style.css" type="text/css">
Reference: https://expressjs.com/en/starter/static-files.html参考： https ://expressjs.com/en/starter/static-files.html
解决方案2
1 2019-05-20 03:28:12
Since you are working with hbs, create "public" folder and keep your static folders, css,javaScript,img inside the "public" folder.由于您使用的是 hbs，因此请创建“public”文件夹并将您的静态文件夹 css、javaScript、img 保存在“public”文件夹中。 then然后
const path = require("path");
app.use(express.static(path.join(__dirname, "public")));
Here is the magic, since you told express that use "public" as a static folder, when you link the files inside that folder, hbs will take "public" folder as the "root" folder.这是魔术，因为您告诉 express 使用“public”作为静态文件夹，当您链接该文件夹内的文件时，hbs 会将“public”文件夹作为“根”文件夹。 So lets say you have main.css in folder "style" inside the folder ""public", "public/style/main.css" directory, when you link main.css:因此，当您链接 main.css 时，假设您在文件夹“public”、“public/style/main.css”目录中的文件夹“style”中有 main.css：
<link rel="stylesheet" href="style/main.css" type="text/css" />
Also, this is the complete setup for hbs in express:此外，这是 express 中 hbs 的完整设置：
app.set("view engine", "hbs");
app.engine(
"hbs",
expressHbs({
defaultLayout: "layout",
extname: ".hbs",
layoutsDir: __dirname + "/views/layouts",
partialsDir: __dirname + "/views/partials"
})
);
解决方案3
0 2021-02-15 16:37:29
Place all your css inside a folder - call it static or public .将您所有的 css 放在一个文件夹中 - 称之为static或public 。
So your css is located at public/css/style.css .所以你的 css 位于public/css/style.css 。
In your app.js , you would reference static files by:在您的app.js中，您可以通过以下方式引用静态文件：
app.use(express.static(path.join(__dirname, "public")));
The path of the public folder should be relative to the app.js file. public文件夹的路径应该是相对于app.js文件的。
解决方案4
0 2022-05-29 14:50:49
just make a folder called static.只需创建一个名为 static 的文件夹。 and put your css folder and image folder in static folder.并将您的 css 文件夹和图像文件夹放在静态文件夹中。 Don't forget to first make css folder to keep all css files and image folder for all images.不要忘记首先创建 css 文件夹以保存所有 css 文件和所有图像的图像文件夹。 your code: app.use(express.static(path.join(__dirname, "static" )));你的代码： app.use(express.static(path.join(__dirname, "static" ))); in this code you are saying express to look at static folder and because you don't have static folder you are getting error and your css and image are not applying on your website.在这段代码中，您说要查看静态文件夹，并且因为您没有静态文件夹，所以您会收到错误，并且您的 css 和图像未在您的网站上应用。
解决方案5
0 2022-09-24 21:43:52
Sol: First create a folder static and transfer css folder to static folder. sol：首先创建一个文件夹static并将css文件夹转移到static文件夹。 2.In html file: 2.在 html 文件中：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<link rel="stylesheet" href="css\style.css" type = "text/css">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
Js file js文件
var express = require('express');
var app = express();
var exphbs = require('express-handlebars');
var path = require('path');
app.engine('hbs', exphbs({extname:'hbs'}));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
app.use(express.static("static"));
app.get('/', function(req, res) {
res.render('resume.hbs')
})
app.listen(3000)
解决方案6
-1 2018-07-02 21:19:24
I tried to change the different slashes as well, but that does not entirely solve the problem.我也尝试更改不同的斜杠，但这并不能完全解决问题。 Propably, the bootstrap CSS defines h1 already as well.可能，引导 CSS 也已经定义了 h1。 You therefore need to change the order of the CSS files in your HTML:因此，您需要更改 HTML 中 CSS 文件的顺序：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/style.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<base href="/">
<title>Example Website</title>
<h1>Header</h1>
<hr id = 'headerBorder'>
</head>
<body>
</body>
</html>
Adding only !important to your CSS does not solve the issue.仅添加!important到您的 CSS 并不能解决问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.