Css文件没有在react项目中使用Express JS后端加载

Question

在问这个问题之前，我研究了一下SO，发现了一些东西，但其中一个在我的场景中有效。我正试图从Express后端服务器加载我的React网站。

我的文件夹结构如下:

client
build
css
styles.css
index.html
server
server.js

我现在正在试用express主要是为了学习更多关于它的知识我的server.js文件是这样的

const express = require('express');
const app = express();
const path = require("path");
app.get("/api", (req, res) => {
res.json({"users": ["userOne", "userTwo"]})
})
app.use(express.static(path.join(__dirname, "..", "client", "build")));
app.use(express.static("../client/public"));
app.listen(5000, () => console.log("server started on port 5000"))

我的index.html头

<meta charset="utf-8" />
<link rel="icon" href="./images/logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link type="css" rel="stylesheet" href="/css/styles.css" />
<meta name="description" content="Welcome to Sintra Welcome Centre" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdn.rawgit.com/prashantchaudhary/ddslick/master/jquery.ddslick.min.js"></script>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

当我在端口5000上运行服务器时，我可以看到HTML正在加载，但我看不到任何地方对styles.css文件的引用，检查网络选项卡似乎根本没有加载。

有人能指出我的错误吗?

Answer 1

如果您使用了标记验证器，标记验证器就会发现这个错误。

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

浏览器唯一能识别的CSS MIME类型是text/css。

你已经告诉它期待css(这不是一个有效的MIME类型)，所以浏览器认为它不能使用样式表，因为它不是在一个已知的格式。

因此它不会尝试加载它。

省略type属性。