nuxt 2 中全局 css 必须配置在 nuxt.config.js 的 css 数组中，支持别名（如 '@/assets/css/main.css'）和第三方 css（含 http 地址），路径错误、顺序颠倒或误用 head.link 会导致 ssr 样式缺失、fouc 或覆盖失效。
全局 CSS 必须写在 css 数组里（nuxt.config.js）
这是唯一能保证样式在所有页面和服务端渲染时都生效的方式。直接在 head.link 里加 rel="stylesheet" 只影响客户端，SSR 时会漏掉样式，导致 FOUC 或服务端无样式。
-
css数组里的路径会被 Webpack 正确 resolve，支持别名：css: ['@/assets/css/main.css']、css: ['~assets/css/reset.css'] - 不推荐用相对路径如
./assets/css/xxx.css，因为 nuxt.config.js 的执行上下文不固定，容易报Module not found - 第三方 CSS（如 antd、bootstrap）也应走这里：
css: ['ant-design-vue/dist/antd.css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css']—— 注意：HTTP 地址会被自动内联进<style></style>标签，而非<link>
@import 在单文件组件里只作用于当前组件 scope
<style lang="css">@import "../assets/css/utils.css";</style> 这种写法不会提升作用域，它只是把 utils.css 内容插入到当前组件的 <style></style> 块中，且不经过 PostCSS 处理（比如 autoprefixer 不生效），也不参与提取 CSS 文件。
- 仅适合极小的、纯局部的样式补丁，比如某个页面专属 reset
- 路径必须是相对路径，且以
../或./开头；@/别名在这里不被支持 - 如果
utils.css本身含@import，嵌套层级深了容易触发 Webpack 的maximum call stack size exceeded
静态 CSS 文件要放 static/ 目录，用 head.link 引入
适用于你不想让 Webpack 处理的原始 CSS（比如第三方压缩版、CDN 回退用的本地副本），或者需要动态控制加载时机的场景。
- 文件放在
static/css/vendor.css，然后在nuxt.config.js的head.link中写：{ rel: 'stylesheet', href: '/css/vendor.css' } -
static/下的路径会 1:1 映射到根 URL，/开头即表示从域名根开始 - 不要把
static/路径混进css数组：css: ['/css/vendor.css']是无效的，Webpack 找不到该模块
使用预处理器（less/sass）时，路径解析逻辑不同
如果你用 lang="less" 或 lang="scss"，@import 行走的是预处理器自己的 resolver，和 Webpack 的 css 数组无关。
- 推荐统一用别名：
@import '~assets/styles/variables.less';（~指向srcDir，通常是项目根） - 避免
@import '../styles/mixins.less'这类相对路径，一旦组件移动位置就断掉 - 注意
node_modules中的样式包（如normalize.css）需加~前缀才能被 less/sass 正确定位：@import '~normalize.css/normalize.css';
css 数组加载顺序 = 样式优先级顺序。后写的 CSS 会覆盖前面同名选择器。如果你同时引入了 Bootstrap 和自定义 reset，reset 必须写在前面，否则无效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
