VSCode中:root变量跨文件用var()时不显示颜色方块问题

以下是针对主流前端编辑器（以VS Code为例）的实用解决方法：

• 配置编辑器全局识别CSS变量
  打开VS Code设置（快捷键Ctrl+,），搜索css.customData并点击「编辑 in settings.json」。先在项目中创建一个css-variables.json文件，按以下格式填入你的变量信息：

  {
    "variables": [
      {
        "name": "--primary-color",
        "value": "#2563eb",
        "description": "主色调"
      },
      {
        "name": "--secondary-color",
        "value": "#10b981",
        "description": "辅助色"
      }
    ]
  }
  

  接着在settings.json中添加该文件路径：

  "css.customData": ["./css-variables.json"]
  

  保存后编辑器就能全局识别这些变量，跨文件调用var()时会正常显示颜色方块。

• 借助CSS预处理器简化管理
  若使用Sass/Less，把变量统一放在单独的_variables.scss/_variables.less文件中，通过@import引入到其他文件。这类预处理器的编辑器插件默认支持跨文件变量预览，无需额外配置。

• 安装专门的CSS变量扩展
  比如VS Code的CSS Variables扩展，安装后会自动扫描项目中:root里的变量定义，全局提供颜色预览和智能提示，无需手动配置自定义数据。

内容的提问来源于stack exchange，提问作者Nabs