css数组是唯一正解，需用webpack可解析路径（如~/assets/css/main.css）、避免绝对路径/static目录错误、按重置→主题→组件库顺序注入，并统一收拢至assets/css/global/管理。
css 数组是唯一正解，但写错路径、放错目录、顺序颠倒，样式就进不了 css 数组里必须用 webpack 可解析的路径
它不是“随便写个 CSS 文件地址就能加载”，而是要让 Nuxt 的构建系统能把它当作模块处理：
-
~/assets/css/main.css✅ 正确：~ 指向src/（Nuxt 3 默认），assets 下文件参与编译，支持@use、变量、@import（需 postcss-import） -
node_modules/normalize.css/normalize.css✅ 正确：Nuxt 自动解析 node_modules，无需~node_modules/ -
/css/main.css❌ 错误：/ 开头被当绝对 URL，请求http://localhost:3000/css/main.css，404 -
static/css/vendor.css❌ 错误：static 目录不走 webpack，放这里会报Module not found -
assets/css/main.css❌ 错误：没别名，Nuxt 不识别相对路径
static 目录的 CSS 必须走 app.head.link
如果你非要把 static/css/vendor.css 当作纯静态资源用（比如 CDN 备份、第三方未编译 CSS），就不能塞进 css 数组：
- 在
nuxt.config.ts里用app.head.link.push({ rel: 'stylesheet', href: '/css/vendor.css' }) -
href必须以/开头，对应static/css/vendor.css的实际部署路径 - 这种引入方式 SSR 安全，但不支持 Sass/Less 编译、无 HMR、无法复用
assets中的变量 - 如果同时用了
css数组和head.link，注意浏览器最终<link>顺序由两者拼接决定，优先级靠后覆盖靠前
顺序决定 CSS 优先级，重置类必须放最前
css 数组里的路径按顺序注入为 <link> 标签，顺序 = 层叠顺序：
-
['~/assets/css/reset.css', '~/assets/css/theme.css', 'element-plus/dist/index.css']✅ 合理：重置 → 主题 → 组件库，避免被覆盖 - 把
element-plus放第一位，它的.el-button就可能干掉你自定义的.btn - 不要在 CSS 文件里写
@import：Nuxt 不解析它为依赖，SSR 时可能丢失，HMR 也不触发 - 如果用了
@nuxtjs/tailwindcss，确保tailwind.config.ts的content包含你自定义 class 所在的文件，否则 PurgeCSS 会删掉它们
开发时生效但 build 后丢失？检查 extractCSS
尤其在 target: 'static' 或 nuxi generate 场景下：
- 默认
build.extractCSS在 static target 下是false，导致部分 CSS 没被打包进_nuxt/目录 - 显式启用：
build: { extractCSS: true }（Nuxt 3.12+ 已默认开启，但旧项目或自定义配置可能关着） - 所有全局 CSS 必须声明在
css数组里——插件里import、组件里<style src="..."></style>都不算，不会被提取 - 改了
assets下的 SCSS 变量后，经常需要手动刷新页面；热更新有时不触发样式重载，重启nuxi dev最稳
css: ['...']，而是半年后回来看，发现重置样式在 head.link 里，主题色在 plugins 里动态插入，而 css 数组只留了一行注释。所有全局 CSS 应收拢到 assets/css/global/ 下，再统一入口导入。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
