node.js 应用因误将 css 文件当作 javascript 执行而抛出 syntaxerror: unexpected token '.'，根本原因是路径配置或引用方式错误导致浏览器未正确加载样式表，而是由 node.js 尝试解析 css 为 js 模块。
node.js 应用因误将 css 文件当作 javascript 执行而抛出 syntaxerror: unexpected token '.'，根本原因是路径配置或引用方式错误导致浏览器未正确加载样式表，而是由 node.js 尝试解析 css 为 js 模块。
在 Express.js 应用中，CSS 文件本身绝不会直接引发 Node.js 运行时语法错误——因为 .css 文件默认不被 Node.js 解析执行。当你看到类似 C:\...\style.css:2\n.like__btn { ^ SyntaxError: Unexpected token '.' 的报错，这明确表明：Node.js 正在试图把 style.css 当作 JavaScript 模块来 require 或 import，而非通过 HTTP 静态服务提供给浏览器。
这通常由以下两种典型错误引发：
✅ 正确做法：使用 express.static() 提供静态资源，并确保前端路径可访问
你已在 index.js 中正确配置了静态中间件：
app.use('/assets', express.static('./assets'));该配置意味着：所有以 /assets/ 开头的 HTTP 请求（如 GET /assets/style.css）将由 Express 自动映射到项目根目录下的 ./assets/ 文件夹。
立即学习“前端免费学习笔记（深入）”；
因此，在 EJS 模板中，<link> 标签的 href 必须匹配该路由前缀，且应使用服务器根路径（以 / 开头），而非相对路径（如 ./assets/ 或 ../assets/），否则易受模板所在目录层级影响：
<!-- ✅ 推荐：绝对路径，语义清晰，不受 EJS 文件位置影响 --> <link rel="stylesheet" href="/assets/style.css" type="text/css"> <!-- ❌ 避免：./assets/ 是相对于当前 HTML 文档 URL 的路径，可能解析为 /views/assets/ 等无效地址 --> <link rel="stylesheet" href="./assets/style.css" type="text/css"> <!-- ❌ 错误：若 EJS 在 /views/ 下，../assets/ 可能越级失败；且不符合 express.static 路由约定 --> <link rel="stylesheet" href="../assets/style.css" type="text/css">
? 验证方法：启动服务后，直接在浏览器访问 http://localhost:3000/assets/style.css。若返回 CSS 内容且状态码为 200，说明静态托管成功；若返回 404 或触发 Node.js 报错，则路径配置或文件位置有误。
⚠️ 常见陷阱与排查清单
- 文件实际位置不符：确认 style.css 确实位于项目根目录下的 ./assets/style.css（而非 ./public/assets/ 或 ./views/assets/）；
- 缓存干扰：浏览器可能缓存了旧的 <link> 标签或 404 响应，开发时建议启用「Disable cache」并硬刷新（Ctrl+F5）；
- EJS 模板未正确渲染：检查是否遗漏 res.render() 或路径拼写错误（如 res.render('index') 对应 views/index.ejs）；
- 意外的 require('./assets/style.css')：全局搜索项目代码，确保没有任何地方通过 require()、import 或 fs.readFileSync() 同步读取 .css 文件——这是导致 SyntaxError 的直接原因；
- Webpack/Vite 等构建工具干扰：若项目已引入前端打包器，请勿混用 express.static 托管源 CSS；应统一交由构建工具处理并输出至 public/ 目录。
✅ 完整工作示例
目录结构：
my-app/ ├── app.js ├── assets/ │ └── style.css ← 纯 CSS，无 JS 语法 ├── views/ │ └── index.ejs
app.js（关键片段）：
const express = require('express');
const app = express();
// ✅ 正确挂载静态资源
app.use('/assets', express.static('assets'));
// ✅ 设置 EJS 视图引擎
app.set('view engine', 'ejs');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index');
});
app.listen(3000);views/index.ejs：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Blog</title> <!-- ✅ 使用绝对路径，与 express.static 路由完全匹配 --> <link rel="stylesheet" href="/assets/style.css" type="text/css"> </head> <body> <button class="like__btn">Like</button> </body> </html>
? 总结
SyntaxError: Unexpected token '.' 绝非 CSS 语法问题，而是 Node.js 错误加载了 CSS 文件的强烈信号。解决核心在于：确保 CSS 仅通过 HTTP 静态服务（express.static）交付给浏览器，绝不被 Node.js 引擎解析。始终使用 /assets/xxx.css 这类绝对路径引用，并通过浏览器 DevTools 的 Network 标签验证资源是否以 200 OK 正确加载。路径即契约——遵守它，样式自然生效。
