CSS 未链接到 HTML Replit

Question

我正在使用 replit 来托管使用 Node.js 和 Socket.io 的聊天服务器。我使用了 socket.io (https://socket.io/get-started/chat) 提供的入门指南，发现 HTML 代码使用了内部 CSS。我试图改变它并有以下代码：

index.js

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

server.listen(3000, () => {
  console.log('Site is up and running!');
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    </head>

  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
        <script src="/socket.io/socket.io.js"></script>
        <script>
          var socket = io();
        
          var messages = document.getElementById('messages');
          var form = document.getElementById('form');
          var input = document.getElementById('input');
        
          form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
              socket.emit('chat message', input.value);
              input.value = '';
            }
          });
        
          socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
          });
        </script> 
  </body>
</html>

styles.css

body {
    margin : 0;
    padding-bottom : 3rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#form {
    background : rgb(0, 0, 0, 0.15);
    padding : 0.25rem;
    position : fixed;
    bottom : 0;
    left : 0;
    right : 0;
    display : flex;
    height : 3rem;
    box-sizing : border-box;
    backdrop-filter : blur(10px);
}
#input {
    border : none;
    padding : 0 1rem;
    flex-grow : 1;
    border-radius : 2rem;
    margin : 0.25rem;
}
#input:focus {
    outline : none;
}
#form > button {
    background : #333;
    border : none;
    padding : 0 1rem;
    margin : 0.25rem;
    border-radius : 3px;
    outline : none;
    color : #fff;
}
#messages {
    list-style-type : none;
    margin : 0;
    padding : 0;
}
#messages > li {
    padding : 0.5rem 1rem;
}
#messages > li:nth-child(odd) {
    background : #efefef;
}

但是，当我运行 repl 时，预期的结果没有出现，并且 CSS 不适用于 HTML。谁能告诉我这是怎么回事？

Answer 1

我认为你应该使用 index.js 文件中的 express.static() 方法。此方法允许我们提供静态文件。 releated documentation

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

The function signature is:

express.static(root, [options]) The root argument specifies the root directory from which to serve static assets.

For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:

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

Now, you can load the files that are in the public directory:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png http://localhost:3000/hello.html

Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL. To use multiple static assets directories, call the express.static middleware function multiple times:

app.use(express.static('public'))` 
app.use(express.static('files'))

Express looks up the files in the order in which you set the static directories with the express.static middleware function.

CSS 未链接到 HTML Replit

CSS Not Linking To HTML Replit

html

css

node.js

socket.io

replit