css配置项只对webpack可解析资源生效，如bootstrap需写全路径'bootstrap/dist/css/bootstrap.min.css'，否则报错或无样式；路径大小写敏感、缺少style字段、未装sass-loader等均会导致失败。
css 配置项确实是最常用、最稳妥的全局引入方式，但它只对能被 webpack 解析的资源生效——不是所有“外部 CSS”都能直接塞进去。
为什么 css: ['bootstrap'] 会报错或没样式
常见错误现象：Cannot resolve module 'bootstrap'，或页面渲染后完全没样式， 里也看不到对应 <link> 标签。
- Bootstrap npm 包本身不导出 CSS 文件（只导出 JS），
css: ['bootstrap']会失败；必须写成css: ['bootstrap/dist/css/bootstrap.min.css'] - 路径大小写敏感：比如
@fortawesome/fontawesome-free/css/all.css写成all.CSS或漏掉/css/子目录，就会 404 - 包未在
package.json中声明style字段（如某些仅提供 SCSS 源码的 UI 库），css: ['xxx']会静默失败或构建报错 - 用了
.scss或.sass入口但没装sass和sass-loader@10（注意版本兼容性），构建直接中断
css 数组里能写什么类型的内容
它接受字符串或对象，但每种写法含义和限制不同：
- 字符串形式：
'bulma'→ 要求包已安装且package.json有style或main指向 CSS - 本地路径：
'@/assets/css/main.css'→ 支持别名，路径必须存在，否则构建时报错 - 绝对路径：
'/assets/css/theme.css'→ 不推荐，Nuxt 不会解析/开头路径为模块，容易 404 - 对象形式（Nuxt 3+）：
{ src: '@/assets/css/vars.scss', lang: 'scss' }→ 显式指定预处理器，避免 loader 推断失败
用 head.link 引入 CDN 或本地静态 CSS 的注意事项
当你要引入未打包进构建流程的 CSS（比如 CDN、public 目录下的文件），head.link 是更合适的选择：
-
href值不能以~/开头（这是 Nuxt 别名，head不识别），得用/css/bootstrap.css（对应public/css/bootstrap.css） - CND 地址要确保支持 CORS，否则控制台可能报
Refused to apply style - 如果 CSS 依赖字体或图片资源，CDN 域名不一致时可能触发跨域请求失败，建议搭配
rel="preconnect"提前建立连接 -
head.link插入的是 SSR 渲染时的<link>标签，不会参与 webpack 构建，所以无法做 CSS 提取、压缩或作用域处理
真正容易被忽略的是：同一份 CSS 被 css 和 head.link 同时引入时，不仅冗余，还可能导致优先级混乱或重复加载。上线前务必检查最终 HTML 的 里是否有多余的 <link> 标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
