在 nuxt.config.ts 的 css 数组中必须使用 webpack 可解析的相对路径（如 '~/assets/css/main.css'），cdn 链接、static/ 路径、错误顺序或未启用 extractcss 会导致 ssr 样式失效、fouc 或构建漏包。
直接在 nuxt.config.ts 的 css 数组里写对路径，就能 SSR 安全地全局引入 CSS；但 CDN 链接、static/ 路径、错误的导入顺序或未启用 extractCSS 都会导致样式在服务端不生效、FOUC 或构建漏包。
css 数组必须用 webpack 可解析的相对路径
Nuxt 3 的 css 配置项只接受能被 webpack 处理的模块路径。它不是“只要文件存在就行”，而是要走完整的构建链路——尤其在 SSR 场景下，服务端也需要成功 require 到这些样式文件。
- ✅ 正确：
['~/assets/css/main.css', '@/assets/scss/variables.scss']（~和@都指向src/，支持预处理器） - ✅ 可省略扩展名：
['~/assets/css/reset']（Nuxt 按['css', 'scss', 'sass', 'less']顺序尝试匹配） - ❌
['/css/main.css']：以/开头会被当绝对 URL，服务端无法 resolve - ❌
['static/css/vendor.css']：static/目录不进 webpack，SSR 时 module not found - ❌
['bootstrap']：没导出style字段的包会静默失败，得写完整路径'bootstrap/dist/css/bootstrap.min.css'
SSR 下避免 FOUC 的关键点
FOUC（Flash of Unstyled Content）在 SSR 中常因样式未同步注入导致——浏览器先渲染无样式的 HTML，再等 JS 加载并补上样式。这通常不是配置错，而是加载时机或方式不对。
- CDN 链接（如
'https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css'）不会在服务端加载，只客户端执行 → 必然 FOUC - 想用 CDN？改用
app.head.link.push({ rel: 'stylesheet', href: '...' })，它会生成<link>标签，服务端可输出 - 启用了
experimental.styleInjection（Nuxt 4+）？部分样式延迟注入，临时设为false排查 - 开发中改了
assets/scss变量但没重启nuxi dev？HMR 有时不触发样式重载，手动重启最稳
静态部署（nuxi generate）必须开 build.extractCSS
默认 extractCSS: false，所有样式以内联 <style></style> 注入。这对 SPA 没问题，但在 SSG 场景下，动态 import 或条件加载的 CSS 可能根本不会被打包进 HTML —— 因为服务端没有执行那些 JS 分支。
- ✅ 静态站必加：
build: { extractCSS: true }，确保所有 CSS 提取为独立.css文件并 link 进 HTML - ⚠️ SSR 部署（
target: 'server'）可不开，但若页面含大量动态样式逻辑，仍建议开启以防漏样式 - 注意：开启后需确保 CDN 或
public/下的字体、图片等资源路径正确，否则 404
组件内 scoped 样式与全局 CSS 的作用域冲突
全局 CSS 不会穿透 <style scoped></style>，这是预期行为，不是 bug。但容易误以为“样式没生效”。
- 想覆盖 scoped 组件内的类？用
:deep(.btn)（Vue 3 + Nuxt 3 推荐写法） - 想重置某组件的默认样式？把重置规则（如
normalize.css）放在css数组第一位，靠前加载、低优先级，方便后续覆盖 - 想彻底隔离第三方库样式？别塞进
css数组，改用definePageMeta({ css: ['...'] })按页引入
真正容易被忽略的是：SSR 下的样式加载是“同步链路”，任何路径错误、语法报错、或 webpack 解析失败，都会让整个样式块静默消失——终端可能只报一句模糊的 ERROR in ./assets/css/main.css，得顺着 @import 一层层查文件是否存在、路径是否拼错、Sass 变量是否未定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
