本文详解 Node.js + Express 应用中因误将 CSS 文件当作 JavaScript 执行而导致的 SyntaxError: Unexpected token '.' 错误，说明根本原因并提供标准静态资源托管方案。
本文详解 node.js + express 应用中因误将 css 文件当作 javascript 执行而导致的 `syntaxerror: unexpected token '.'` 错误，说明根本原因并提供标准静态资源托管方案。
该错误（C:\...\style.css:2\n.like__btn { ^ SyntaxError: Unexpected token '.'）并非 CSS 本身有问题，而是 Node.js 进程试图将 .css 文件作为 JavaScript 模块加载执行——这通常发生在开发者无意中通过 require()、import 或错误配置的模块解析路径直接引用了 CSS 文件（例如 require('./assets/style.css')），或服务器路由意外将 .css 路径交由 JS 解析器处理。
但根据你提供的代码，实际问题更可能是路径配置与 HTML 引用不匹配导致浏览器请求失败，而你在调试时误将 CSS 文件双击打开或在 Node.js 环境中直接运行了它。CSS 文件必须由浏览器通过 <link> 标签加载，绝不能被 Node.js 运行时解析。
✅ 正确做法如下：
-
确保静态资源中间件配置无误（你已正确实现）：
立即学习“前端免费学习笔记（深入）”；
// index.js app.use('/assets', express.static('./assets'));此配置表示：所有以 /assets/... 开头的 HTTP 请求，将从项目根目录下的 ./assets 文件夹中查找对应文件。
-
HTML 中 <link> 的 href 必须与静态路由前缀严格一致：
你当前写的是：<link rel="stylesheet" href="./assets/style.css" type="text/css">
⚠️ 这是相对路径，会基于当前 HTML 页面 URL 解析。若你的 EJS 页面渲染路径为 /（如 http://localhost:3000/），则浏览器实际请求的是 http://localhost:3000/assets/style.css —— 这恰好匹配 app.use('/assets', ...)，因此本应正常工作。
但若页面路径为 /post/123，./assets/style.css 就会解析为 http://localhost:3000/post/assets/style.css（404），此时某些开发工具或错误重定向可能触发异常行为。
✅ 推荐使用根对路径（absolute path），避免路径歧义：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ✅ 正确：以 '/' 开头，从域名根开始解析 -->
<link rel="stylesheet" href="/assets/style.css" type="text/css">
<!-- 其他资源保持不变 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Blog</title>
</head>-
验证文件结构与权限：
确保目录结构如下（区分大小写）：your-project/ ├── index.js ├── views/ │ └── index.ejs └── assets/ └── style.css ← 文件名必须完全一致（包括大小写）
-
禁止在 Node.js 中直接 require CSS：
切勿在 .js 文件中写：// ❌ 错误！Node.js 无法解析 CSS const css = require('./assets/style.css'); // 或 import './assets/style.css'; // 在未配置 CSS loader 的纯 Node 环境中无效如需构建时处理 CSS（如打包、压缩），应使用 Webpack/Vite 等前端构建工具，而非在 Express 运行时加载。
? 快速排查步骤：
- 打开浏览器开发者工具（F12）→ Network 标签页 → 刷新页面 → 查看 style.css 请求是否返回 200 OK；
- 若返回 404，检查控制台报错路径，并核对 express.static 路径与 <link href> 是否匹配；
- 若返回 500 或解析异常，请检查服务器端是否有中间件意外劫持 .css 请求（如自定义路由 app.get('*.css', ...)）。
总结：CSS 是浏览器端资源，其加载完全依赖 HTTP 响应与 HTML 标签，与 Node.js 运行时无关。只要 express.static 配置正确、HTML 路径准确、文件物理存在，即可零配置生效。无需额外插件或编译步骤。
