nuxt3中css数组必须使用相对assets根目录的纯路径，如'assets/css/global.css'，禁用@/~别名；scss变量需通过vite.css.preprocessoroptions配置additionaldata显式注入。
直接在 nuxt.config.ts 的 css 数组里写路径就能生效，但路径写错、顺序不对、或混用预处理器配置时，样式会静默失效——不报错，也不渲染。
css 数组路径必须是相对 assets 根目录的纯路径
Nuxt3 不再支持 ~ 或 @ 别名作为 css 数组项的前缀（Nuxt2 可以，Nuxt3 会忽略）。错误写法：'@/assets/css/global.css' 或 '~/assets/css/global.css'；正确写法只有：'assets/css/global.css'。
- 文件必须真实存在于
assets/css/global.css（不是src/assets或public/） - 路径区分大小写，Linux/macOS 下
Global.css≠global.css - 如果用了
app.vue手动@import，和css数组重复引入，可能导致样式被覆盖或重复计算
SCSS/Sass 全局变量需额外配 vite.css.preprocessorOptions
仅把 assets/variables.scss 加进 css 数组，变量不会自动注入到所有 .vue 文件的 <style lang="scss"></style> 中。必须显式配置 vite.css.preprocessorOptions。
- 用
@use（推荐）：additionalData: '@use "@/assets/variables.scss" as *;' - 用
@import（兼容旧写法）：additionalData: '@import "@/assets/variables.scss";' -
@use方式下，as *表示把变量、函数、mixin 全局暴露，否则需带命名空间引用 -
additionalData是字符串，不能写成对象或数组；换行要用\n，不能直接回车
全局 CSS 加载时机影响 SSR 和首屏样式
css 数组里的样式会在 HTML head 中内联（SSR）或通过 <link> 引入（SPA），但顺序决定层叠优先级。如果第三方 UI 库样式和自定义全局 CSS 冲突，顺序错了就白配。
- 把重置类、基础变量、工具类放前面，业务样式放后面
- 避免在
css数组里混入不同预处理器文件（如同时写'assets/main.css'和'assets/theme.scss'），vite 默认只对.scss文件启用 preprocessorOptions - 若使用
scoped样式，全局 CSS 仍会穿透生效——这是预期行为，不是 bug
最容易被忽略的是：Nuxt3 的 css 配置只控制「构建时注入」，它不处理运行时动态加载或条件加载；如果需要按路由或用户角色加载不同全局样式，得用 useHead 手动管理 <link> 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
