📅 最后修改于: 2023-12-03 15:08:43.737000 🧑 作者: Mango
在 Node.js 中使用 CSS 可以让我们更好地控制网站的样式，使页面呈现更加美观和用户友好。本文将介绍如何在 Node.js 中添加 CSS。
首先需要在 Node.js 项目中添加一个 CSS 文件，文件名可以随意命名，例如 index.css。在 CSS 文件中我们可以写入样式规则，例如：
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
h1 {
font-size: 36px;
color: #333;
text-align: center;
}
.container {
width: 80%;
margin: 0 auto;
}
要让网站应用能够加载 CSS 文件，我们需要在 HTML 文件中添加一个链接，指向 CSS 文件的路径。如果你使用 Express 框架，则可以在主应用程序中使用以下代码：
app.use(express.static("public"));
该代码将让 Express 应用程序在 public 目录下查找静态文件。在 public 目录下，我们可以创建一个 CSS 文件夹，然后将我们的 index.css 文件放在其中。
最后，在 HTML 文件的 head 标签中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div class="container">
<h1>Welcome to My Website</h1>
<p>This is my first Node.js application.</p>
</div>
</body>
</html>
这里我们使用 link 标签将 index.css 文件链接到 HTML 文件中。你需要确认 href 属性的路径与你的实际文件路径一致，这里我们将文件放在了 public/css 文件夹下，因此路径应该是 /css/index.css。
现在我们可以启动应用程序并访问页面，看看 CSS 是否已经生效。如果你使用 Express 框架，则可以使用以下代码启动应用程序：
const express = require("express");
const app = express();
app.use(express.static("public"));
app.listen(3000, () => {
console.log("Server is running on port 3000...");
});
在命令行中执行 node app.js，然后在浏览器中输入 http://localhost:3000 即可访问页面。如果一切顺利，你应该能够看到页面正常显示，并且 CSS 样式已经生效。
在 Node.js 中添加 CSS 非常简单，只需要编写样式规则并将 CSS 文件链接到 HTML 文件中即可。你可以使用 Express 框架来更方便地启动静态文件服务器。希望本文能对你有所帮助！