nuxt中css数组只接受webpack可解析路径，应写~/assets/css/main.css等相对路径，不可用/css/或static/目录路径；assets下css参与编译支持预处理器，static下仅原样复制。
css 配置项能自动引入全局 CSS，但必须写对路径、选对目录、注意顺序，否则样式根本不会进 css 数组里该写什么路径
css 数组只接受 webpack 可解析的资源路径，不是所有“看起来像 CSS 的字符串”都能生效：
✅ 正确写法：['~/assets/css/main.css', 'bootstrap/dist/css/bootstrap.min.css']
✅ 支持省略扩展名（Nuxt 会按 ['css', 'scss', 'sass', 'less'] 顺序匹配）：['~/assets/css/reset']
❌ 错误写法：['/css/main.css']（/ 开头被当绝对 URL，找不到本地文件）
❌ 错误写法：['static/css/vendor.css']（static 目录不走 webpack，放这里会报模块解析错误）
❌ 错误写法：['bulma']（除非 bulma 包的 package.json 明确声明了 style 字段，否则静默失败）
assets 和 static 下的 CSS 怎么选
本质区别在于是否参与构建流程：• assets 目录下的 CSS（含 .scss、.less）会被 webpack 编译：支持 @use、变量、@import、CSS Modules，热更新生效
• static 或 public 目录下的 CSS 是纯静态文件：只做原样复制，适合 CDN 备份、第三方未编译 CSS 或字体文件
• 想用 static/css/vendor.css？别塞进 css 数组，改用：app.head.link.push({ rel: 'stylesheet', href: '/css/vendor.css' })
• 混用时顺序关键：css 数组靠前的样式优先级更低，重置类建议放第一位
为什么加了配置却没看到样式
问题通常不出在代码本身，而在构建或加载链路上：• 开发时改了 assets 下的 SCSS 变量，但没重启 nuxi dev —— HMR 有时不触发样式重载
• 终端出现 ERROR in ./assets/css/main.css 类报错：检查 @import 路径是否存在、Sass 语法是否合法
• SSR 场景下用了 CDN 地址（如 'https://cdn.example.com/style.css'）——服务端不加载，只客户端执行，必然 FOUC
• 启用了 experimental.styleInjection（Nuxt 4），部分样式延迟注入，可临时设为 false 排查
• 组件用了 <style scoped></style>，全局 CSS 无法穿透，得用 :deep(.class) 或移除 scoped
build.extractCSS 必须开吗
取决于部署目标：• 默认情况下，extractCSS 是 false，所有样式以内联 <style></style> 标签注入
• 生成静态站（nuxi generate）时，若没显式启用 build: { extractCSS: true }，部分动态或条件加载的 CSS 可能漏打包
• SSR 部署（target: 'server'）一般不需要开，但若发现首屏样式闪烁或缺失，可尝试开启并检查 _nuxt/ 目录下是否有 css/ 文件
• 注意：extractCSS: true 会把样式提取为独立文件，但也会让 head.link 引入的静态 CSS 失去压缩和提取能力
css: [...]，而是后续维护时搞不清某条规则来自 css 数组、head.link 还是某个插件的动态插入。建议所有全局样式统一收口到 assets/css/global/ 下，再通过单入口导入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
