外部css必须通过app.head.link配置，href需为完整url或以/开头的绝对路径（如https://cdn...或/css/vendor.css），相对路径不被识别；其加载顺序决定层叠优先级，后项覆盖前项。
head.link 里怎么写外部 CSS 的 href
外部 CSS 必须通过 app.head.link 配置，不能塞进 css 数组——后者只认本地可解析路径（如 ~/assets/...），填 CDN 地址会直接报 Module not found 错误。
href 值必须是完整 URL 或以 / 开头的绝对路径（对应 static/ 目录）：
-
https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css✅ -
/css/vendor.css✅（等价于static/css/vendor.css） -
css/vendor.css❌（相对路径不被识别） -
./static/css/vendor.css❌（static下文件不走 webpack，不能用点号前缀）
为什么用 app.head.link 而不是 css 数组
css 数组本质是让 webpack 打包时把样式“编译进 JS bundle”，适合源码级控制（比如 Sass 变量、@import、热更新）；而外部 CSS 是运行时动态加载，不参与构建流程，也不支持预处理器。
常见误用场景：
- 把 Bootstrap CDN 写进
css: ['https://...']→ 终端报错Can't resolve 'https://...' - 想用
@import在 SCSS 里引入 CDN 地址 → 编译失败，@import只接受本地路径或 npm 包名 - 改了 CDN 地址但页面没更新 → 浏览器缓存了该 CSS，需加版本参数如
?v=4.1.1或禁用开发环境缓存
如何保证 link 标签注入顺序和优先级
app.head.link 数组内元素按顺序插入 ，靠后的 <link> 样式优先级更高。如果你的自定义样式要覆盖第三方库（比如 Tailwind 或 Bootstrap），就得把它放后面：
app: {
head: {
link: [
{ rel: 'stylesheet', href: 'https://cdn.tailwindcss.com' },
{ rel: 'stylesheet', href: '/css/custom.css' } // 这个会覆盖前面的同名 class
]
}
}
注意：css 数组注入的样式会排在 app.head.link 之前，所以全局重置类（如 normalize.css）建议放 css 数组第一位，再把第三方库和自定义样式用 app.head.link 控制顺序。
开发时样式没生效？先检查这三处
外部 CSS 注入失败往往不是配置写错，而是环境或缓存问题：
- 终端没报错，但
里没看到<link>→ 检查是否在nuxt.config.ts顶层写了app.head，而不是嵌套在export default defineNuxtConfig({ ... })外面 - 链接能访问，但样式不生效 → 打开 DevTools 的 Network 面板，看该 CSS 是否返回 200 且 MIME 类型是
text/css；某些 CDN 会根据 User-Agent 返回不同内容 - 用了
@nuxtjs/tailwindcss且自定义 class 被 PurgeCSS 删了 → 确保tailwind.config.ts的content字段包含你通过app.head.link引入的 HTML 模板或静态页路径
真正容易被忽略的是：一旦把 CSS 放进 app.head.link，它就脱离了 webpack 的依赖图，修改后不会触发热更新，每次调整都得手动刷新页面——别指望保存文件后样式自动变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
