Node.js应用加载本地CSS文件触发SyntaxError语法错误问题

错误原因 #

这个报错的核心是Node.js将CSS文件当作JavaScript代码执行了，CSS中的类选择器.在JS语法中属于非法token，因此抛出Unexpected token '.'错误。

排查与解决步骤 #

• 检查JS文件是否误导入CSS
  查看index.js或其他项目JS文件，有没有用require('./assets/style.css')或import语句导入CSS文件。如果存在这类代码，直接删除即可——静态资源由express托管，不需要在JS中导入。

• 优化静态资源配置路径
  你当前的静态资源配置逻辑正确，但相对路径可能存在歧义，建议改用绝对路径：

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

  借助path.join(__dirname, 'assets')可以确保无论脚本启动路径如何，都能精准定位到assets文件夹。

• 修正EJS中的CSS引用路径
  当前EJS里的href="./assets/style.css"是相对页面的路径，若项目存在多级路由，可能导致资源请求失败。改成根路径开头的绝对路径：

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

  这个路径会和express配置的/assets静态路由完全匹配，确保资源能被正确加载。

• 清除浏览器缓存
  强制刷新页面（Ctrl+Shift+R）或在浏览器开发者工具中禁用缓存，避免旧的错误资源引用干扰。

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