VS Code中如何获取其他工作区文件（含已导入文件）中CSS变量的自动补全建议？

我之前也被这个问题困扰过，试过几种方法后终于找到适合的解决方案，给你整理了几个靠谱的路子：

一、优先靠VS Code内置CSS语言服务解决（已导入文件的情况） #

如果已经在当前CSS文件里用@import导入了目标文件，正常情况下VS Code的内置CSS语言服务应该自动识别关联关系，把变量加入补全列表。要是没生效，你可以检查这几个点：

• 导入路径必须正确：比如和当前文件同目录的other_file.css，要写成@import './other_file.css';，别漏了开头的./，不然VS Code可能找不到文件
• 确保CSS验证功能开启：打开VS Code设置，搜索css.validate，确认这个选项是勾选状态——语言服务就是靠这个功能来解析关联文件的
• 要是还是没反应，试试按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Reload Window重启窗口，有时候缓存会影响解析

二、自定义数据文件兜底（覆盖未导入的工作区文件） #

如果有些变量所在的文件没被导入，但又在同一个工作区，你可以用自定义数据文件让VS Code识别它们：

1. 在项目根目录创建一个css-custom-data.json文件，把需要补全的变量写进去，格式示例：

   {
     "version": 1.1,
     "properties": [
       {
         "name": "--foo",
         "description": "全局根变量，值为1"
       },
       {
         "name": "--bar",
         "description": ".my-class下的变量，值为2"
       }
     ]
   }
   

2. 打开VS Code的settings.json（可以通过Ctrl+,/Cmd+,打开设置，然后点击右上角的打开设置图标进入JSON编辑模式），添加以下配置：

   "css.experimental.customData": ["./css-custom-data.json"]
   

3. 重启VS Code窗口后，这些变量就会出现在所有CSS文件的补全列表里了

三、大型项目用插件更省心 #

如果项目里CSS文件特别多，变量分散在各个地方，手动维护自定义数据文件太麻烦，你可以安装CSS Variables插件。它会自动扫描整个工作区里的CSS、SCSS、LESS文件，把所有定义的CSS变量都收集起来，不管有没有被导入，只要你输入var(，就会自动弹出所有匹配的变量补全，我在大型项目里用这个插件省了超多时间

内容来源于stack exchange