cannot recognize scss variables file added with vitepreprocess

[refact0r]

Describe the bug

I am getting the error:

Error: Undefined mixin.
   ╷
14 │         @include border;
   │         ^^^^^^^^^^^^^^^
   ╵
  app\src\routes\+page.svelte.vite-preprocess.scss 14:3  root stylesheetsvelte(style)

This isn't right because the mixin is defined in the file src/variables.scss. The css applies on the site correctly so I believe the issue is with the language extension.

My sveltekit app is located in /app. If I open that folder as root in VSCode, the error disappears. This seems consistent with the behavior described in the docs: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/scss-less.md

I have tried the suggested solution:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
	plugins: [sveltekit()],
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `@use "${join(__dirname, '/src/variables.scss').replace(/\\/g, '/')}" as *;`
			}
		}
	}
});

But, it seems to have no effect. Could this be because it is in the Vite config instead of the Svelte config?

Reproduction

I created a fresh sveltekit app and reproduced the issue: https://github.com/refact0r/svelte-language-tools-issue
If you open +page.svelte it should give you an error.

Expected behaviour

There should be no error because the mixin is valid.

System Info

• OS: Windows
• IDE: VSCode

Which package is the issue about?

Svelte for VS Code extension

Additional Information, eg. Screenshots

No response

[jasonlyu123]

Could this be because it is in the Vite config instead of the Svelte config

Yes. vitePreprocess also can't locate the vite config file because of the process.cwd issue. The easiest fix I could find is to move the config to svelte.config.js.

	preprocess: vitePreprocess({
		style:{
			css: {
				preprocessorOptions: {
					scss: {
						additionalData: `@use "${join(__dirname, '/src/variables.scss').replace(/\\/g, '/')}" as *;`
					}
				}
			}
		}
	}),

And if you need it in other scss files, you can copy it instead. Configure the vite.config.js path is probably another option but it seems like then the kit plugin will also be used and you'll need more config to make it happy.

[refact0r]

Thanks. Moving the css: {} options to svelte.config.js does fix the error from the VSCode extension, but breaks the actual application of the styles on the site. So I have to keep a copy of it in vite.config.js.