VSCode CSS颜色预览需启用editor.colorDecorators设置，并确保文件语言模式为css/scss/less；var(--color)需在同一文件或已导入文件中定义；点击色块左键可调出内置调色器，但不支持Tailwind等框架类名。
VSCode 里 CSS 颜色不显示小方块预览？检查 editor.colorDecorators 是否启用
VSCode 默认开启颜色装饰器，但部分用户重装、用旧配置或禁用插件后会丢失该功能。核心开关是设置项 editor.colorDecorators，它控制所有颜色值（如 #ff0、rgb(255, 0, 0)、var(--primary)）旁是否显示色块。
- 打开设置（
Ctrl+,或Cmd+,），搜colorDecorators - 确认复选框已勾选；若未启用，勾上即可立即生效，无需重启
- 如果勾选后仍不显示，大概率是当前文件没被识别为 CSS/SCSS/Less —— 检查右下角语言模式是否为
css、scss等，不是plaintext或html -
editor.colorDecorators是全局设置，但可被工作区设置覆盖，留意设置面板右上角的“工作区”标签是否被意外修改
为什么 var(--color) 不显示预览？CSS 自定义属性需有有效声明上下文
VSCode 的颜色预览依赖语义分析：它只对能解析出具体颜色值的 var() 显示色块。如果变量未定义、定义在外部文件、或写法不规范，预览就会失效。
- 确保
--color在同一文件或已导入的@import/@use文件中明确定义，例如:root { --primary: #007acc; } - SCSS 中使用
$color变量不会触发颜色预览——这是 Sass 语法，VSCode 的 CSS 语言服务不处理它 - 不要写成
color: var(--missing);且无任何--missing定义，此时 VSCode 无法推断颜色，也不渲染色块 - 部分插件（如
CSS Peek）能增强自定义属性跳转，但不影响原生预览逻辑
点击色块唤不出取色器？确认鼠标操作和扩展兼容性
VSCode 原生支持点击颜色预览块呼出调色板（含十六进制输入、HSL 滑块、历史记录），但这个功能对操作方式和环境有明确要求。
- 必须用鼠标**左键单击**色块（不是悬停，不是右键），点击后弹出的是 VSCode 内置调色器，非系统取色器
- 如果点击无反应，先禁用所有插件（尤其是 CSS 相关的，如
Auto Rename Tag、IntelliSense for CSS旧版），再测试 —— 某些插件会劫持点击事件 - 仅支持标准 CSS 颜色语法：
#fff、rgba(0,0,0,0.5)、hsl(120, 100%, 50%)；不支持currentColor、transparent或无效值（如#ggg） - VSCode 1.84+ 对 CSS Modules 和
.module.css文件支持变弱，若用这类命名，建议改用.css后缀临时验证
颜色预览在 SCSS/Less 中失效？检查语言模式和插件链路
VSCode 原生支持 CSS，但对 SCSS/Less 的颜色预览依赖语言服务插件。如果用了 .scss 文件却没色块，问题不在设置，而在语言绑定是否到位。
立即学习“前端免费学习笔记（深入）”；
- 右下角点击语言模式，确认是
SCSS（不是Sass或CSS）；VSCode 内置的Sass模式不支持颜色装饰器 - 安装官方推荐插件
SCSS IntelliSense（作者: mrmlnc）或Live Sass Compiler（注意后者已停止维护，可能冲突） - Less 用户需安装
Less IntelliSense，并确保文件以.less结尾，且未被其他插件强制设为css模式 - 如果项目用 Vite + CSS 预处理器，确保
vite.config.ts中未禁用css.preprocessorOptions导致语言服务无法加载
最常被忽略的一点：颜色预览和取色器功能完全依赖 VSCode 的内置 CSS 语言服务器，它不读 postcss.config.js 或 tailwind.config.js。Tailwind 类名（如 bg-blue-500）或 PostCSS 插件生成的颜色，VSCode 原生一律不识别 —— 这不是 bug，是设计边界。
