如何解决为什么在开发人员工具中取消显示的styles.css？
我正在尝试将“ index.html”文件作为响应发送到本地服务器，并且在该index.html中，有一个指向外部CSS文件的链接。
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get("/",function(req,res){
res.sendFile(__dirname+"/index.html");
});
并且我将链接包含在HTML head元素中，如下所示：
<link href="styles.css" rel="stylesheet" >
现在问题是在页面上没有加载'styles.css'文件。并且在Chrome开发人员工具的“网络”部分显示状态：已在“ styles.css”前面取消。
Here is the screenshot of the canceled status showing for styles.css
为什么会发生这种情况，解决方案是什么？我已经尝试过其他人删除缓存的解决方案，但这是行不通的。
编辑：Here，我遇到了完全相同的问题，我也尝试了他们的解决方案，但这不起作用
EDIT2 ：当我尝试@wilkoklak的解决方案时，It's still the same error
解决方法
您还必须提供css文件！
您可以使用interface MonsterRequest {
player: Player;
type: 'monster';
options: MonsterType[];
}
interface HeroRequest {
player: Player;
type: 'hero';
options: HeroType[];
}
type ChoiceRequest = MonsterRequest | HeroRequest;
创建一个名为express.static的文件夹，并将您的css移动到那里
您的项目结构看起来与此类似
styles.css然后添加此中间件：
project/
css/
styles.css
server.js
index.js
此中间件将查找与app.use(express.static('css'))
文件夹中的文件是否匹配，并进行响应发送。
css（打开网页）时，浏览器还将GET /发送到服务器。您的应用中没有GET /styles.css的路由处理程序。 /styles.css为您做到了
可以使用 express.static 和专用于静态文件的静态文件夹（例如www）来解决css无法加载的问题。
以下是使用express.static的有效示例：
步骤1：将静态文件（index.html，styles.css放在名为www的静态文件夹中）
文件夹结构：
/nodejs-web-demo
--> server.js
/www
--> index.html
--> styles.css
第2步：在www（静态）文件夹中创建index.html和styls.css文件
文件名：www / index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/styles.css">
<title>Expressjs website</title>
</head>
<body>
<p class="my-style">Hello! How are you doing?</p>
</body>
</html>
文件名：www / styles.css
.my-style{
color: blue;
}
步骤3：使用 express.static 从静态文件夹提供文件
const http = require('http')
const express = require('express')
const path = require('path')
const app = express()
app.use(express.static("www"))
app.use('/',function(req,res) {
res.sendFile(path.join(__dirname + '/www/index.html'))
})
const server = http.createServer(app)
const port = 3000
server.listen(port)
console.log('Web server started on port # ' + port)
输出：
> node server.js
Web server started on port # 3000
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。