本文详解 Node.js + Express + EJS 项目中 CSS 文件被误当作 JavaScript 执行导致 SyntaxError: Unexpected token ‘.’ 的根本原因，并提供标准静态资源托管方案与路径调试方法。
本文详解 node.js + express + ejs 项目中 css 文件被误当作 javascript 执行导致 `syntaxerror: unexpected token ‘.’` 的根本原因，并提供标准静态资源托管方案与路径调试方法。
在 Express.js 应用中，CSS 文件本身 绝不会直接引发 JavaScript 语法错误 ——除非它被错误地以 .js 方式加载（例如通过 <script src=”…”>），或更常见的情况： 浏览器请求的 CSS 路径返回了 404，而服务器未正确配置静态资源中间件，导致 Express 尝试将 style.css 文件作为模块执行（例如在开发时误用 require(‘./assets/style.css’)）。但根据你提供的错误堆栈：
C:UserssukhoDesktopdatabasemidtermassetsstyle.css:2 .like__btn {^ SyntaxError: Unexpected token '.'该错误发生在 Node.js 进程内部（路径为本地文件系统），说明 Node.js 正在尝试解析 style.css 为 JavaScript 模块 ——这几乎可以确定：你在某处（如 index.js 或其他 JS 文件） 错误地 require() 或 import 了 .css 文件，例如：
// ❌ 错误示例：Node.js 不原生支持 import CSS const style = require('./assets/style.css'); // → 触发 SyntaxError！// 或 ES 模块中：import './assets/style.css'; // 同样报错（无 CSS 加载器时）✅ 正确做法是：CSS 必须由浏览器通过 <link> 标签加载，而非由 Node.js 解析。Express 只需确保该文件能被浏览器正确访问。
✅ 正确配置静态资源服务
你已正确使用了 Express 静态中间件：
立即学习 “ 前端免费学习笔记（深入）”；
app.use('/assets', express.static('./assets'));这意味着：
- 文件 ./assets/style.css 将可通过 http://localhost:3000/assets/style.css 访问；
- 对应 HTML 中 <link> 的 href 必须匹配该公开路径。
因此，EJS 中的引入应为：
<link rel="stylesheet" href="/assets/style.css" type="text/css">⚠️ 注意：
- 使用 绝对路径 /assets/…（推荐），而非相对路径 ./assets/… 或 ../assets/…；
- 相对路径易受当前页面 URL 影响（如 /posts/1 下 ./assets/style.css 会请求 /posts/assets/style.css，返回 404）；
- 绝对路径 /assets/… 始终从根目录解析，稳定可靠。
? 排查步骤（关键！）
-
检查浏览器开发者工具（Network 标签页）：
刷新页面，查看 style.css 请求是否返回 200 OK。若为 404，说明路径配置或文件位置有误。 -
验证文件物理路径：
确保 style.css 确实位于项目根目录下的 ./assets/style.css（即 process.cwd() + ‘/assets/style.css’ 可读）。 -
全局搜索 require / import：
在整个项目中搜索 .css、.scss 等样式文件名，彻底移除任何对 CSS 文件的 require() 或 import 调用——这是本错误的唯一根源。 -
确认无构建工具干扰 ：
若你使用 Webpack/Vite 等，需额外配置 CSS 加载器；但纯 Express + EJS 项目 不应引入此类工具，也无需配置。
✅ 完整工作示例
项目结构：
/my-app ├── index.js # Express 入口 ├── views/ │ └── index.ejs # EJS 模板 └── assets/ └── style.css # 你的 CSS 文件index.js：
const express = require('express'); const app = express(); // ✅ 正确托管静态资源 app.use('/assets', express.static('assets')); // 注意：'assets' 是相对路径，等同于 './assets' // 设置 EJS app.set('view engine', 'ejs'); app.set('views', './views'); app.get('/', (req, res) => {res.render('index'); }); app.listen(3000);views/index.ejs <head> 片段：
<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://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> <title>Blog</title> </head>
⚠️ 重要提醒
- Node.js 默认 不解析 CSS —— 该错误 100% 源于你代码中某处对 CSS 文件的非法 require/import；
- express.static() 仅处理 HTTP 请求，不影响 Node.js 模块加载逻辑；
- EJS 模板中的 <link> 是纯前端行为，与服务端 JS 执行完全隔离；
- 若使用 TypeScript 或现代打包工具，请确保已配置 @types/node 和 CSS 声明文件（如 declare module ‘*.css’;），但这属于进阶场景，非本问题成因。
遵循以上规范，即可彻底解决 SyntaxError: Unexpected token ‘.’，让样式安全、稳定地为前端服务。
