html - 为什么CSS文件被取消了?

标签 html css node.js express

我正在做一个简单的 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/

相关文章:

html - 如何修复图标对齐?

jquery - 在 bootstrap 中单击菜单时,菜单向左移动(在 chrome 中大约 20px)

node.js - writeFileSync 上的 ENOENT 在 repl 上工作在 gulp-asset-manifest 上失败

node.js - 如何将 HTTP 流转换为 HTTPS?

node.js - 运行node/nodemon时如何抑制某些警告?

javascript - 单击元素后 Jquery 选择器不起作用

html - br 标签可以有哪些 CSS 属性?

javascript - 使用javascript打印特定的div

html - 如何在 html 中设置与百分比 % 相等的宽度

php - 当用户在选择字段中选择新选项时,如何运行 mysql 查询?