为什么 styles.css 在开发人员工具中显示已取消？

Question

我正在尝试将我的 'index.html' 文件作为对本地服务器的响应发送，并且在 index.html 中，有一个 link 到外部 CSS文件.

const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get("/", function(req,res){
  res.sendFile(__dirname+"/index.html");
});

并且我已经将 link 包含在 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

I just added the whole thing from the Bootstrap examples so don't really think that would be a problem

Answer 1

您还必须提供 css 文件！

您可以使用 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 为您完成

Answer 2

css加载不出来的问题可以通过express.static和静态文件的专用静态文件夹（例如：www）来解决。

这是使用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

为什么 styles.css 在开发人员工具中显示已取消？

Why is styles.css showing canceled in Developer Tools?

html

javascript

css

web-development-server