最可靠方式是在中用import引入，如import 'element-plus/theme-chalk/index.css'；中@import无法解析node_modules路径，会静默失败。
用 import 在 <script setup></script> 中引入最可靠
这是目前 Vue 3（尤其 Vite 项目）中引入第三方 CSS 库最推荐的方式，比如 Element Plus、Naive UI 或 normalize.css。它走的是标准模块解析流程，支持 HMR、Tree-shaking（若库提供 CSS 按需导出）、路径别名（@/）和构建时 PostCSS 处理。
常见错误是误以为 @import 在 <style></style> 里也能解析 node_modules —— 实际上原生 CSS 的 @import 不认识模块路径，会直接 404。
-
import 'element-plus/theme-chalk/index.css'→ 正确，全局生效 -
import '@/assets/css/reset.css'→ 正确，路径可被别名解析 -
@import 'element-plus/theme-chalk/index.css'（写在<style></style>里）→ 静默失败，控制台无报错但样式不出现 - 漏掉分号（如
import './xxx.css'后没写;）→ Vite 编译报错：“Unexpected token”
<style src="..." scoped></style> 适合纯样式抽离且零额外覆盖的场景
当你把整个组件的视觉层完全交给一个外部 CSS 文件（比如 login-page.css），且不需要在组件内加任何一行补充样式时，这种写法最干净。Vue 会直接读取文件内容并注入 scoped 属性选择器，不经过构建工具的 import 解析链，热更新更稳。
但它有硬性限制：一旦用了 src，同个 <style></style> 标签里再写任何 CSS 规则（哪怕只有一行 .extra { color: red }）都会被忽略。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- ✅
<style src="./base.css" scoped></style> - ❌
<style src="./base.css" scoped>.extra { color: red }</style>→.extra不生效 - ⚠️ 路径是相对于 .vue 文件的，不是相对于项目根目录；若移动 .vue 文件，
src路径必须同步调整 - ⚠️ CSS 文件内部的
url()（如字体、图片）必须相对于该 CSS 文件本身，不是 .vue 文件
CDN CSS 必须写在 public/index.html 的
想用 Bootstrap、Font Awesome 或 Quill 的 CDN 版本？唯一稳妥方式是直接在 public/index.html 的 中加 <link rel="stylesheet">。Webpack/Vite 不处理 HTML 中的 link，所以它加载最早、最稳定，也绕过所有作用域和模块解析陷阱。
常见翻车点是把它塞进组件的 <style scoped></style> 里：@import url('https://cdn...') 看似能跑，实则生成的选择器带 data-v-xxx 属性，而 CDN CSS 里没有对应属性，根本匹配不上。
- ✅
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">放在顶部 - ❌
<style scoped>@import url('https://...');</style>→ 请求发出去了，但样式不生效 - ❌ 把
<link>放在底部 → 首屏渲染时无样式，出现闪动 - ⚠️ 多个 CDN CSS 要按依赖顺序排：重置样式 → 框架 → 主题 → 自定义覆盖
覆盖第三方组件样式必须用 :deep() + 锚点选择器
想改 Element Plus 的 .el-input__inner 边框？不能单独写 :deep(.el-input__inner)，Vue 3 编译器会直接丢弃这条规则。它必须挂在一个当前组件内真实存在的选择器后面，作为“作用域锚点”。
真正起效的是组合写法，且加载顺序比选择器权重更重要：确保你的覆盖样式在第三方 CSS 之后加载（比如通过 import 顺序控制），否则即使写了 :deep() 也没用。
- ✅
.my-form :deep(.el-input__inner) { border-radius: 4px; }→ 有效 - ❌
:deep(.el-input__inner) { ... }→ 编译后消失，DevTools 里找不到对应 CSS 规则 - ❌
:deep(.el-input .el-input__inner)→ 空格分隔的复合选择器不支持，会被忽略 - ⚠️ 如果第三方组件类名动态生成（如
el-input--small），得 inspect 元素看真实 class，不能只看文档
import './xxx.css'，在 <script setup></script> 和 <style src="..."></style> 中，对相对路径的解析起点完全不同；而 CSS 加载顺序一旦错位，:deep() 就只是摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
