CSS Peek的Peek Definition功能默认不生效，需满足CSS文件在工作区、HTML用相对路径引入、插件已启用且未被拦截三点；否则悬停无卡片、右键无选项，常见因远程路径、动态样式或插件冲突导致。
CSS Peek 的 Peek Definition 功能在 HTML 中默认不生效，必须满足路径、文件类型和插件状态三个前提，否则悬停或右键只会显示“no definition found”。
为什么悬停 class 没反应？检查这三点
常见错误现象是光标停在 class="btn-primary" 上 1 秒后无悬浮卡片，或右键菜单里没有 Peek Definition 选项。根本原因通常是：
- CSS 文件未被 VS Code 视为工作区一部分（例如放在
node_modules或完全外部路径） - HTML 引用的 CSS 是内联
<style>或<link href="https://cdn.example.com/style.css">—— CSS Peek 不解析远程 URL 或动态插入样式 - 插件已安装但被其他插件屏蔽，比如
Auto Rename Tag或IntelliSense for CSS会劫持光标事件
如何让 Peek Definition 在 HTML 中真正可用
确保 CSS 文件在当前工作区根目录下（如 src/styles/main.css），且 HTML 通过相对路径引用：<link rel="stylesheet" href="./styles/main.css">。然后：
- 右键点击 class 值（如
btn-primary），选择Peek Definition—— 不要选 “Go to Definition”，那是跳转，不是预览 - 若没出现菜单项，按
Cmd+Shift+P（macOS）或Ctrl+Shift+P（Win/Linux），输入Peek Definition手动触发 - 对
.scss或.less文件，需在对应语言设置中显式启用："css.peekEnabled": true
F12 和 Ctrl+Click 跳转失败时的替代方案
当 F12 或 Ctrl+Click 报错 “No definition found for ‘xxx’”，说明 CSS Peek 无法解析选择器上下文（比如类名被 BEM 命名或嵌套过深）。此时可：
立即学习“前端免费学习笔记（深入）”；
- 手动确认 CSS 文件是否被正确加载：打开该 CSS 文件，把光标放在目标类定义上，按
F12看能否反向跳回 HTML —— 若能，说明单向链路正常，问题出在 HTML 解析侧 - 改用
CSS Navigation插件（比 CSS Peek 更激进地扫描全局 class，但可能误匹配） - 临时关闭所有非必要插件，仅保留 CSS Peek + 默认语法支持，再测试
最容易被忽略的是：CSS Peek 不处理 @import 链接的外部文件（如 @import 'variables.css';），它只扫描当前打开的 CSS/SCSS 文件及其直接引用的本地路径。如果定义藏在被 import 的文件里，必须先把那个文件也加入工作区并确保路径可解析。
