我正在做一个简单的 Node 元素来练习,但我无法设法使用其 css 样式提供 html 文件。我之前在 SO 上问过同样的问题,但我没有提到 css 文件的状态在开发人员工具中被“取消”。当我编辑它时,没有人回答它为什么被取消,所以我希望有人能帮我解决这个问题。这让我发疯。 这是我的 app.js 代码: app.use("/signup", express.static("public"));
app.get("/", (req, res)=>{
res.send("Welcome to our website");
});
app.get("/signup", (req, res)=>{
res.sendFile(`${__dirname}/index.html`)
})
这是我的html代码:
<head>
<title>testapp</title>
<link href="./public/styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<form method="post" action="/signup">
<input type="text" placeholder="*First Name" required></input>
<input type="text" placeholder="*Last Name" required></input>
<input type="number" placeholder="*Age" required></input>
<input type="email" placeholder="*Email" required></input>
<input type="submit" value="Submit" required></input>
</form>
</body>
当我删除“/signup”的 get 方法,并将我的 index.html 放在公共(public)目录中,同时更新到 css 的链接时,它工作得很好,但我不希望它在 '/' 路由中.而且在没有本地主机的情况下打开 index.html 文件时,它也可以正常工作。 我搜索了一下,发现有人在 SO 上问过同样的问题,我认为答案不适合我的情况,我不确定,而且我不太了解。 What does status=canceled for a resource mean in Chrome Developer Tools? .
提前谢谢你。
最佳答案
在此处阅读有关静态服务的文档:https://expressjs.com/en/starter/static-files.html
您不需要在您的 css 链接中指定 /public
;只需执行以下操作:
<link href="/styles.css" type="text/css" rel="stylesheet"/>
关于html - 为什么CSS文件被取消了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54774474/