Nuxt 3 中 css 数组路径必须精确且可被 Vite 解析，需带扩展名、用 ~ 别名或绝对路径，禁用模糊路径和包名简写，SCSS 需显式配置，public 文件须以 / 开头。
css 数组在 Nuxt 2 和 Nuxt 3 中行为一致但限制更严
两者都通过 nuxt.config.js（或 .ts）的 css 数组全局注入样式，路径写法表面相同，但 Nuxt 3 对路径解析、模块识别和构建阶段校验更严格。Nuxt 2 允许部分模糊路径（如漏掉 .css 后缀有时能 fallback），Nuxt 3 会直接报 Module not found。另外，Nuxt 3 默认启用 extractCSS: true，而 Nuxt 2 在 generate 模式下需手动开启，否则静态部署时 CSS 丢失。
- ✅ 通用正确写法：
css: ['~/assets/css/main.css']（必须带扩展名，~别名有效） - ❌ Nuxt 3 明确拒绝：
css: ['element-plus']（必须写全路径如'element-plus/dist/index.css'） - ⚠️ Nuxt 2 可能容忍但 Nuxt 3 报错：
css: ['./assets/css/main.css']（相对路径不被解析） - ⚠️ SSR 下 CDN 链接在两者中都易导致 FOUC，但 Nuxt 3 更强调改用
app.head.link替代
Nuxt 3 中 node_modules CSS 路径必须可被 Vite 直接解析
Nuxt 3 底层是 Vite，css 数组本质是 Vite 的 CSS 入口列表，所有路径必须指向能被 import 或 require 的文件。这意味着不能只写包名，也不能依赖未导出 CSS 的入口（比如 element-plus 包本身不导出 CSS，只有 dist/ 下有）。
- ✅ 正确：
css: ['element-plus/dist/index.css']（已安装element-plus） - ✅ 正确：
css: ['@headlessui/vue/dist/components.css'] - ❌ 错误：
css: ['bulma']→ 需改为'bulma/css/bulma.min.css'或用 SCSS 版本配合 loader - ? 验证方法：在终端运行
node -e "console.log(require.resolve('element-plus/dist/index.css'))"，能输出路径才说明可解析
预处理器文件（SCSS/SASS）在 Nuxt 3 中需显式 loader 支持
Nuxt 3 默认支持 .scss，但对 .sass（缩进语法）或新版 sass-loader@11+ 兼容性不稳定。若你从 Nuxt 2 迁移了大量 .sass 文件，直接写入 css 数组大概率失败，错误信息为 Module parse failed: Unexpected character。
- ✅ 推荐做法：统一转为
.scss后缀，并确保安装sass和sass-loader@10（Nuxt 3.10+ 可试@11，但需检查构建日志） - ✅ 更稳妥写法（对象形式）：
{ src: '~/assets/scss/main.scss', lang: 'scss' } - ❌ 不要依赖 Nuxt 2 时代的隐式 loader 行为；Nuxt 3 不再自动推断未声明的
lang - ? 若用
@nuxtjs/tailwindcss模块，它会接管 PostCSS 流程，此时css数组里不应再重复引入 Tailwind CSS 文件
public 目录下的 CSS 必须用绝对路径 / 开头
这是迁移中最常踩的坑：Nuxt 2 有时允许在 css 数组里写 public/css/custom.css 并“侥幸”成功；Nuxt 3 会直接忽略或报错。因为 public/ 下的资源是静态复制，不走构建流程，必须用运行时可访问的 URL 路径。
- ✅ 正确：
css: ['/css/custom.css']（对应public/css/custom.css） - ❌ 错误：
css: ['public/css/custom.css']或css: ['~/public/css/custom.css'] - ⚠️ 注意：这种写法在 SSR 时仍有效，因为
/css/custom.css是客户端可请求的路径，但不会被服务端内联 - ? 若该 CSS 依赖动态变量（如 CSS 自定义属性），建议改用
app.head.link+useHead动态注入，而非塞进css数组
迁移真正卡住的地方，往往不是语法差异，而是路径语义变了——~ 在 <style></style> 里无效、public/ 不再被当本地模块、node_modules 路径必须精确到文件。别凭经验补后缀或删 dist/，先用 require.resolve 验证路径是否存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
