node js 加载 css 文件 - Javascript (1)

📌 相关文章

📜 node js 加载 css 文件 - Javascript (1)

📅 最后修改于: 2023-12-03 15:33:08.015000 🧑 作者: Mango

Node.js 加载 CSS 文件

在 Web 开发中，CSS 是我们进行页面排版和样式设计的重要工具之一。而在 Node.js 中，我们同样需要加载 CSS 文件来实现一些特殊效果或布局。

使用方法

在 Node.js 中加载 CSS 文件可以采用 fs 模块和 http 模块进行。我们可以通过 fs 模块读取本地的 CSS 文件内容，然后将其注入到 http 响应体中返回。

示例代码如下：

const http = require('http');
const fs = require('fs');

http.createServer((req, res) => {
  if (req.url === '/main.css') {
    fs.readFile(__dirname + '/main.css', 'utf-8', (err, data) => {
      if (err) {
        console.error(err);
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end('500 - Internal Server Error');
        return;
      }
      res.writeHead(200, { 'Content-Type': 'text/css' });
      res.write(data);
      res.end();
    });
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.write('<link rel="stylesheet" href="/main.css">');
    res.write('<body>Node.js 加载 CSS 文件</body>');
    res.end();
  }
}).listen(3000);
console.log('Server running at http://localhost:3000');

我们定义了一个简单的 HTTP 服务器，当请求的 URL 是 /main.css 时，我们使用 fs 模块读取当前目录下的 main.css 文件内容，并将其写入 http 响应体中返回。

当请求的 URL 不是 /main.css 时，我们返回一个包含 main.css 的链接和一些文本内容的 HTML 页面。

接着我们在 listen 方法中指定了服务器监听的端口号为 3000，在控制台输出启动后的 URL。

结语

通过 Node.js 加载 CSS 文件可以方便地实现在 Web 应用中使用 CSS 样式效果。需要注意的是，通过 fs 模块读取文件时需要判断文件读取是否成功，并对读取出错时作出相应的处理。