SvelteKit+SCSS+Vite报错：Undefined variable问题解决求助

核心原因 #

Vite的css.preprocessorOptions配置仅作用于构建流程，但Svelte语言服务（如IDE代码检查）依赖svelte.config.js中的预处理配置识别SCSS变量，两者配置不一致导致误报。

解决方案 #

方案1：统一在svelte.config.js中配置SCSS变量导入 #

将Vite中additionalData的配置迁移到svelte.config.js的vitePreprocess参数里，让Svelte工具链和语言服务都能读取到变量定义：

修改svelte.config.js：

import path from 'path'
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

const config = {
  kit: {
    adapter: adapter(),
  },
  preprocess: [vitePreprocess({
    scss: {
      additionalData: `@use 'src/scss/variables' as *; @use 'src/scss/mixins' as *;`
    }
  })]
};
 
export default config

完成后可移除vite.config.js中css.preprocessorOptions.scss的配置，避免重复定义。

方案2：修复路径解析问题（可选） #

如果存在路径识别异常，用绝对路径替代相对路径：

// 在svelte.config.js中
additionalData: `@use '${path.resolve(__dirname, 'src/scss/variables')}' as *; @use '${path.resolve(__dirname, 'src/scss/mixins')}' as *;`

方案3：刷新IDE语言服务 #

修改配置后若报错仍存在，在VS Code中按Ctrl+Shift+P，输入Svelte: Restart Language Server，清除语言服务的配置缓存。

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