CSS闪烁的根源是关键样式未内联至首屏HTML。Next.js/Nuxt需将Less编译后的关键CSS（含:root变量、主题类、首屏样式）在app/layout.tsx顶层导入，否则仅客户端注入导致无样式渲染。
服务端渲染时CSS闪烁的根源在哪
不是CSS没加载完，而是关键样式没在首屏HTML里就位。Next.js或Nuxt这类框架在SSR时，如果样式没被提前注入或内联，浏览器拿到纯HTML后会先渲染无样式的DOM，等CSS加载解析完才重绘——这中间就是“闪”的来源。
Less本身不参与SSR：它编译成CSS后才进入构建流程，所以问题不在Less语法，而在编译产物是否被正确纳入服务端输出链。常见错误是把import './style.less'写在组件内部，导致该样式完全跳过SSR，只在客户端动态插入。
Less文件必须在app/layout.tsx中import
Next.js要求所有参与SSR的CSS（含Less编译结果）必须从app/layout.tsx顶层导入，否则Webpack/Vite不会将其提取并内联到HTML 中。
- ✅ 正确：
import '../styles/globals.less'放在app/layout.tsx最顶部，且该Less文件最终生成的CSS需包含:root变量、主题类、首屏组件样式 - ❌ 错误：
import './Component.module.less'写在某个Client Component里 —— 这部分样式根本不会出现在SSR HTML中 - ⚠️ 注意：若用
less-loader，确认其javascriptEnabled: true未开启（有安全风险），且paths配置能正确解析@import路径
检查CSS是否真被SSR内联
打开页面源代码（右键 → 查看页面源代码），搜索<style>标签或<link rel="stylesheet">。如果首屏关键样式（比如.header、.hero）没出现在<head>里，而是靠JS动态插入，那一定闪。
立即学习“前端免费学习笔记（深入）”；
- 用DevTools Network面板过滤
css，看Initiator列是不是parser；如果不是，说明没进阻塞渲染链 - Less编译后的CSS若含
@import语句，会导致串行加载，破坏关键路径——必须扁平化或转为@use - Webpack项目要禁用
style-loader用于生产环境，改用mini-css-extract-plugin输出静态CSS文件
主题切换+Less变量最容易漏掉的坑
Less里的@color-primary是编译期常量，不能响应运行时主题切换；真正要动态的必须是CSS Custom Properties（--color-primary），且定义位置必须在:root顶层，不能套在@media或嵌套规则里。
- ❌ 错误写法：
@media (prefers-color-scheme: dark) { :root { @bg: #111; } }—— SSR不执行媒体查询，变量永不生效 - ✅ 正确写法：
:root { --bg: #fff; } [data-theme="dark"] { --bg: #111; }，再由next-themes在服务端注入data-theme - Less文件里别用
~"var(--bg)"混用——编译后变成字面量，失去JS控制能力；变量绑定只留给CSS自定义属性
真正难的不是让Less跑起来，而是判断哪些样式算“首屏关键”：它取决于当前路由、用户权限、设备宽度，甚至A/B测试分组。这个边界划错，内联就白做了。
