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屬性。