SvelteKit项目VS Code提示SASS混合未定义但实际可用问题

问题原因 #

Vite配置里的additionalData仅作用于项目构建流程，VS Code的Svelte语言服务不会自动读取该配置，导致编辑器无法识别全局导入的混合，从而抛出错误提示，实际构建后的样式不受影响。

解决方案 #

1. 在项目根目录创建.vscode文件夹（若不存在），新建settings.json文件，添加SCSS全局导入配置：

   {
     "scss.additionalData": "@use \"src/lib/styles/mixins.scss\" as *;"
   }
   

   注意路径需与Vite配置中的路径保持一致，确保相对于项目根目录。

2. 若使用新版Svelte插件，也可直接配置Svelte的预处理器选项，在.vscode/settings.json中添加：

   {
     "svelte.preprocess": {
       "scss": {
         "additionalData": "@use \"src/lib/styles/mixins.scss\" as *;"
       }
     }
   }
   

3. 保存配置后，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），选择「Reload Window」重启VS Code窗口，让配置生效。

验证 #

回到组件样式代码，@include h1;的错误提示会消失，同时原有样式的构建效果不受影响。

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