使用Express.js时如何渲染CSS文件？已配置项目结构并引入对应模块后该怎么做

按顺序完成以下操作即可，不需要额外安装第三方依赖：

• 第一步：修正Express实例的创建逻辑
  你现在的代码存在重复引入、实例创建错误的问题——原有写法是把express模块本身直接赋值给app，根本没有创建可运行的应用实例，需要把原有代码里的两行引入替换为：

  const express = require('express');
  const app = express();
  const path = require('path');
  

• 第二步：配置静态资源托管规则
  CSS属于静态资源，Express默认不会主动暴露非根目录下的静态文件，需要用内置的express.static中间件指定styles目录的可访问映射。在实例创建完成后添加如下配置：

  app.use('/styles', express.static(path.join(__dirname, 'styles')))
  

  这里的规则是：浏览器发起的请求路径带/styles前缀时，Express会自动从服务器的根目录styles文件夹里匹配对应的文件返回。用path.join拼接路径是为了兼容不同操作系统的路径格式，避免跨环境出现路径找不到的问题。注意这段配置一定要写在所有HTML路由的前面，否则会出现资源请求被路由拦截的问题。
• 第三步：配置HTML页面的返回路由
  所有HTML文件都存在structures目录下，需要配置对应路由让浏览器能拿到页面，不然页面都加载不出来，自然不会发起CSS请求。比如配置根路径返回首页的代码为：

  app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'structures', 'index.html'))
  })
  

• 第四步：修正HTML内的CSS引用路径
  确保HTML文件内的CSS引入路径和之前配置的静态资源前缀完全匹配，比如styles目录下有main.css，对应的引入代码应该写为：

  <link rel="stylesheet" href="/styles/main.css">
  

  不要用相对路径写../styles/main.css，否则浏览器解析的时候会出现路径错位，导致CSS请求404。
• 第五步：启动本地服务
  在代码最后添加端口监听逻辑，启动服务后访问对应地址就能看到CSS生效的效果：

  app.listen(3000, () => {
    console.log('服务已启动，访问地址为 http://localhost:3000')
  })
  

常见问题排查：
如果出现浏览器提示“MIME type 不匹配，样式未加载”的报错，基本都是两个原因：一是静态资源中间件的代码写在了HTML路由的后面，导致Express把CSS请求当成页面路由处理，返回了404的HTML页面；二是HTML里的CSS引用路径和静态资源配置的前缀对不上。

内容的提问来源于stack exchange，提问作者Asaf Senyor