直接在nuxt.config.ts的css数组中添加路径即可全局引入css，但需注意路径必须为'@/assets/xxx.css'格式、顺序决定优先级、scss文件需安装sass与sass-loader，且sass变量须通过vite.css.preprocessoroptions.scss.additionaldata注入而非css数组。
直接在 nuxt.config.ts 的 css 数组里添加路径就能生效，但必须注意加载顺序、作用域范围和文件解析方式——否则样式可能被覆盖、不生效，或只在部分页面起作用。
全局 CSS 文件该放哪、怎么引用
推荐把全局样式文件（如 reset.css、base.scss、variables.scss）统一放在 assets/css/ 或 assets/scss/ 下，路径清晰、便于维护。
-
css数组中支持绝对路径别名：'@/assets/css/reset.css'✅，但不能用~前缀（Vite 不识别） - 如果用 SCSS/Sass，确保已安装
sass和sass-loader（sass@1.77++sass-loader@14+），否则.scss文件根本不会编译 - 多个文件按数组顺序加载，靠前的会被后写的覆盖（比如
reset.css应该排第一，避免被业务样式重置掉） - 路径拼错、文件不存在时，Nuxt 通常静默失败，不会报错——建议打开浏览器开发者工具的 Network 标签页，确认 CSS 文件是否成功加载
为什么 <style scoped></style> 里看不到全局变量
因为 css 数组注入的是「纯 CSS」或「预编译后的 CSS」，它不参与 Sass 变量作用域。Sass 变量（如 $primary-color）只在 <style lang="scss"></style> 块内有效，且必须通过 vite.css.preprocessorOptions.scss.additionalData 注入，而不是 css 数组。
-
css: ['@/assets/scss/variables.scss']❌ —— 这会把变量文件当普通 CSS 加载，导致@import失效、变量未定义 - 真正生效的方式是：
vite.css.preprocessorOptions.scss.additionalData: '@import "@/assets/scss/variables.scss";'（注意末尾分号） - 如果你混用
css数组和additionalData，记得css里只放纯 CSS/SCSS 编译结果，变量逻辑全交给additionalData
修改配置后样式没更新？重启开发服务器
Nuxt 3（基于 Vite）对 nuxt.config.ts 中的 css 或 vite 配置变更不做热更新——改完必须手动停止并重新运行 pnpm run dev（或 npm run dev）。
- 常见误操作：改完
css数组后只刷新页面，结果样式还是旧的 - 检查是否真重启成功：终端输出应包含
[vite] new dependencies optimized或类似提示 - 若仍不生效，删掉
.nuxt和node_modules/.vite目录再重装依赖（尤其在升级 sass 版本后）
最常被忽略的是：全局 CSS 文件本身有语法错误（比如 SCSS 中漏了分号、嵌套层级错乱），会导致整条链路静默失效，连带影响后续所有样式编译——建议用 VS Code 安装 Sass 插件实时校验语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
