Question

我正在做一个简单的节点项目来练习，但是我无法用其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放在公共目录中，同时更新到CSS的链接时，它工作得很好，但是我不希望它在“ /”路由中。并且在没有本地主机的情况下打开index.html文件时，它也可以正常工作。我搜索了一下，发现有人在SO上也遇到了同样的问题，我认为答案不正确，我不确定，我也不了解。What does status=canceled for a resource mean in Chrome Developer Tools?

谢谢。

Answer 1

在此处阅读有关静态投放的文档：https://expressjs.com/en/starter/static-files.html

您无需在CSS链接中指定/public；只需执行以下操作即可：

<link href="/styles.css" type="text/css" rel="stylesheet"/>

为什么取消CSS文件？

1 个答案: