next.js 14 全局样式报错需先确认路由模式：有 app/layout.tsx 则必须用 app router 方式在 layout.tsx 首行导入 globals.css；否则用 pages router 在 pages/_app.js 首行导入。
全局样式报错，先确认你用的是 Pages Router 还是 App Router
Next.js 14（2026年主流版本）默认启用 App Router，_app.js 已被弃用；如果你在 pages/_app.js 里写 import '../styles/global.css' 却报 Global CSS cannot be imported from files other than your Custom _app.js，大概率是你项目实际走的是 App Router（存在 app/layout.tsx），但还在旧路径下维护 _app.js——它被完全忽略，且 Next.js 会拦截并报错。
验证方式：检查项目是否有 app/layout.tsx；有 → 必须用 App Router 方式；没有且只有 pages/ 目录 → 才适用 Pages Router。
- Pages Router 全局 CSS 唯一合法位置：
pages/_app.js第一行，无注释、无前置语句 - App Router 全局 CSS 唯一合法位置：
app/layout.tsx第一行，路径推荐app/globals.css或../styles/globals.css - 两者共存（
pages/+app/）→ 需分别配置，互不影响
Less 文件里 @import CSS 报 “Cannot find module” 或解析失败
CSS 标准不支持 @import "xxx.less"，浏览器和 css-loader 都只处理 .css；而 Less 文件里的 @import "reset.css" 默认被 Less 解析器当作 Less 源码处理，遇到纯 CSS 语法（如 html { margin: 0; }）直接抛 ParseError。
- ❌ 错误写法：
@import "../assets/css/reset.css"（Less 尝试编译它，失败） - ✅ 正确写法：
@import (css) "~normalize.css/normalize.css"（加(css)修饰符跳过编译，原样输出） - 别名
~要生效，前提是less-loader已正确接入且resolve.alias配置了@或~指向项目根目录 - 如果要用本地 CSS 文件，优先放进
public/，改用绝对路径：@import "/static/reset.css"（放弃哈希和构建检查）
Less 全局样式在构建后丢失，但开发时正常
这是最隐蔽的问题：开发服务器（next dev）可能因热重载掩盖 loader 链路断裂，而 next build 会彻底暴露问题。典型表现是 dist/ 下找不到任何 .less 编译出的 CSS 文件，页面纯 HTML 无样式。
- 检查
next.config.js是否导出 plain object（不是函数）：module.exports = { ... }，不是module.exports = () => ({}) - 确认安装了适配 Webpack 5 的
less-loader@11+和@next-plugins/less（非已废弃的next-less） - 运行
next build --debug，搜日志中是否有Compiling with less；没有 →less-loader未触发 - App Router 下，
global.less必须import到app/layout.tsx，不能放在page.tsx或组件内 —— SSR 阶段无法收集
样式重复注入或优先级混乱
即使导入路径和配置都对，仍可能出现 DevTools 中 <link> 标签重复、同名类名覆盖、刷新后闪烁等问题。这不是语法错误，而是构建链路或加载顺序失控。
- Next.js v14.2+ 已修复多数
css-loader与mini-css-extract-plugin的竞态问题，若用旧版（如 v13.4.x），升级可直接解决重复样式表 - 避免混用：不要让
globals.css引入 Tailwind，又在组件里单独@import "button.less"；统一入口更可控 -
@import (css)成功后样式不生效？不是 Less 问题，是浏览器按<link>插入顺序应用样式，去 DevTools 的 Computed 面板查最终生效规则来源 - 第三方 UI 库（如 Ant Design）若含 CSS，加
/* webpackIgnore: true */注释，防止被less-loader错误接管
真正卡住人的往往不是“怎么写”，而是“在哪写”和“谁在读它”——Next.js 的 SSR 样式收集机制只认顶层静态 import，且严格区分路由系统；less-loader 是否激活、@import (css) 是否加对括号、~ 别名是否被 resolve，每个环节断掉都会静默失效，只留一个空白页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
