CSS 未加载 node.js 和快递

Question

My CSS won't load when running my HTML.运行我的 HTML 时，我的 CSS 不会加载。 The HTML is hooked up correctly with the CSS but express and node.js seem to be ignoring it. HTML 与 CSS 正确连接，但 express 和 node.js 似乎忽略了它。 I can't understand the articles and tutorials or other stack overflow questions so I'll just send the code.我看不懂文章和教程或其他堆栈溢出问题，所以我只发送代码。

I also get an error that says the MIME-type is text/HTML even though I've checked multiple times, the MIME-type is indeed text/CSS.我也收到一个错误，说 MIME 类型是 text/HTML，即使我已经检查了多次，MIME 类型确实是 text/CSS。

HTML: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Road</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div class="infinite">
        <div class="shadow"></div>
    </div>
</body>
</html>

CSS: CSS：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: radial-gradient(#9bdfff, #009be4);
  }
  .infinite {
      position: relative;
      width: 800px;
      height: 160px;
      background: #525252;
      transform-origin: bottom;
      transform-style: preserve-3d;
      transform: perspective(500px) rotateX(30deg);
  }
  .infinite::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 100%;
      height: 10px;
      background: linear-gradient(90deg, #fff 0%, #fff 70%, #525252 70%, #525252 100%);
      background-size: 120px;
      animation: animate 0.5s linear infinite;
  }
  @keyframes animate {
      0% {
          background-position: 0px;
      }
      100% {
          background-position: -120px;
      }
  }
  .infinite::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 30px;
      background: #333;
      bottom: -30px;
      transform-origin: top;
      transform: perspective(500px) rotateX(-25deg)
  }
  .shadow {
      position: absolute;
      bottom: -93px;
      left: 50%;
      transform: translateX(-50%);
      width: 95%;
      height: 60px;
      background: linear-gradient(#000, transparent);
      opacity: 0.5;
  }

JS: JS：

const path = require('path');
const { readFile } = require('fs');
const app = express();

app.get('/', (request, response) => {
    response.sendFile(path.join(__dirname, "index.html"))
});

app.get('/', (request, responseC) => {
    responseC.sendFile(path.join(__dirname, "style.css"))
});

app.listen(process.env.PORT || 8080, () => console.log('App availible on http://localhost:8080'))

Stackoverflow told me there's too much code, not enough text so I tried to add more. Stackoverflow 告诉我代码太多，文本不够，所以我尝试添加更多。

Answer 1

Change app.get('/', (request, responseC) => { to app.get('/style.css', (request, responseC) => { app.get('/', (request, responseC) => {更改为app.get('/style.css', (request, responseC) => {

Answer 2

create a folder with name "public" in your project root directory and use the following code to serve images, CSS files, and JavaScript files in a directory named public:在项目根目录中创建一个名为“public”的文件夹，并使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件：

app.use(express.static('public'));

or或者

const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')));

if you have done everything right then you can access file like this:如果你做的一切都正确，那么你可以访问这样的文件：

http://localhost:3000/css/style.css

css link css 链接

 <link rel="stylesheet" href="/style.css">

CSS 未加载 node.js 和快递

问题描述

2 个解决方案

解决方案1
0 2021-11-29 22:00:02

解决方案2
0 2021-11-30 03:29:28

CSS 未加载 node.js 和快递

问题描述

2 个解决方案

解决方案1 0 2021-11-29 22:00:02

解决方案2 0 2021-11-30 03:29:28

解决方案1
0 2021-11-29 22:00:02

解决方案2
0 2021-11-30 03:29:28