VS Code如何在远程多文件夹工作区获取npm包中CSS变量智能提示？

针对你在远程多文件夹工作区遇到的CSS变量提示失效问题，试试这几个可行方案：

方案1：在工作区配置文件中指定Svelte扩展全局CSS路径 #

因为单文件夹设置在多工作区不生效，直接把配置写在.code-workspace文件里：

1. 打开你的工作区配置文件（后缀为.code-workspace）
2. 在settings节点下添加Svelte扩展的全局CSS配置，注意路径要对应工作区里的项目位置：

   "settings": {
     "svelte.plugin.css.globals": ["你的项目文件夹名/node_modules/carbon-components-svelte/css/all.css"]
   }
   

3. 保存后重启VS Code，同时确保根组件（比如+layout.svelte）里已经导入了这个CSS文件：

   <script>
     import 'carbon-components-svelte/css/all.css';
   </script>
   

方案2：手动创建全局变量声明文件 #

如果扩展配置还是不生效，直接提取变量做本地声明：

1. 从node_modules/carbon-components-svelte/css/all.css中复制所有:root下的CSS变量
2. 在项目根目录创建global-css-vars.css文件，粘贴这些变量：

   :root {
     --cds-global-typography-font-family: 'IBM Plex Sans', sans-serif;
     --cds-color-primary-50: #f0f7ff;
     /* 其他所有Carbon CSS变量... */
   }
   

3. 在根组件里导入这个文件，或者在tsconfig.json的include中添加该文件路径，VS Code的CSS语言服务会自动识别这些变量。

方案3：配置VS Code CSS语言服务全局包含 #

利用VS Code原生CSS语言服务的自定义数据功能：

1. 在.code-workspace的settings中添加：

   "settings": {
     "css.languageServer.experimental.customData": [
       {
         "path": "./你的项目文件夹名/node_modules/carbon-components-svelte/css/all.css"
       }
     ]
   }
   

2. 重启VS Code后，CSS语言服务会加载指定文件中的变量，提供自动提示。

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