我正在创建一个示例网站模板,并在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.
我在尝试加载css/style.css页面时遇到404错误,但路径似乎是正确的。以下是该站点的一些基本代码:
应用程序:
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:
<!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:
h1 {
color: blue
}
下面是文件夹的外观,其中显示了路径。我似乎找不到解决这个问题的方法。有什么想法吗?
发布于 2018-07-03 04:55:35
这很可能是由于没有预期的路径造成的。
您在这里使用了这一行:
app.use(express.static(path.join(__dirname, "static")));
因此,在本例中,您需要一个名为"static“的文件夹,在该文件夹中可以放置css和图像。您可以按如下方式链接到它们:
<link rel="stylesheet" href="/css/style.css" type="text/css">
发布于 2019-05-20 11:28:13
因为你使用的是哈佛商学院,创建“公共”文件夹,并保持你的静态文件夹,css,javaScript,img在“公共”文件夹内。然后
const path = require("path");
app.use(express.static(path.join(__dirname, "public")));
这就是魔术,因为你告诉express使用"public“作为一个静态文件夹,当你链接该文件夹中的文件时,hbs将把"public”文件夹作为"root“文件夹。当你链接main.css时,假设你在""public“”,"public/style/main.css“目录下的”main.css“文件夹中有样式:
<link rel="stylesheet" href="style/main.css" type="text/css" />
此外,这是hbs在express中的完整设置:
app.set("view engine", "hbs");
app.engine(
"hbs",
expressHbs({
defaultLayout: "layout",
extname: ".hbs",
layoutsDir: __dirname + "/views/layouts",
partialsDir: __dirname + "/views/partials"
})
);
发布于 2021-02-16 00:37:30
把你所有的css放在一个文件夹里--叫它static
或者public
。
所以你的css位于public/css/style.css
。
在app.js
中,您可以通过以下方式引用静态文件:
app.use(express.static(path.join(__dirname, "public")));
public
文件夹的路径应该是相对于app.js
文件的。
https://stackoverflow.com/questions/51143219
复制相似问题