Scss not prependending variables or global scss on indivdual scss modules in sveltekit

Hi I'm new to svelte and having an issue with using scss, im trying to prepend the data so that it prepends to every single example.module.scss file however when I try to run locally, I am always given error that it cannot find the right variables

SvelteKit Project File System

├── package-lock.json├── package.json├── playwright.config.ts├── src│  ├── app.d.ts│  ├── app.html│  ├── components│  │  ├── Header│  │  │  ├── Header.component.svelte│  │  │  └── Header.module.scss│  │  └── footer│  ├── routes│  │  ├──+layout.svelte│  │  ├── home│  │  │  ├──+error.svelte│  │  │  └──+page.svelte│  │  └── layout.module.scss│  └── scss│  ├── main.scss│  ├── mixins.scss│  └── variables.scss├── static│  └── favicon.png├── svelte.config.js├── tests│  └── test.ts├── tsconfig.json└── vite.config.ts

import adapter from '@sveltejs/adapter-auto';import { vitePreprocess } from '@sveltejs/kit/vite';/** @type {import('@sveltejs/kit').Config} */const config = {    // Consult https://kit.svelte.dev/docs/integrations#preprocessors    // for more information about preprocessors    preprocess: [        vitePreprocess({            scss: {                prependData: '@use"./src/scss/main.scss" as *;'            }        }),    ],    kit: {        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.        // If your environment is not supported or you settled on a specific environment, switch out the adapter.        // See https://kit.svelte.dev/docs/adapters for more information about adapters.        adapter: adapter()    }};export default config;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';export default defineConfig({    plugins: [sveltekit()],    test: {        include: ['src/**/*.{test,spec}.{js,ts}'],    },    css: {        preprocessorOptions: {            scss: {                prependData: `@use './src/scss/main.scss'as *;`,            },        },    },});

main.scss

@use "mixins";@use "variables.scss";

variables.scss

$color-black: #0A0A0A;    $color-white: #f5f5f5;    $font-primary:'Poppins',    sans-serif;

error

Internal server error: [sass] Undefined variable.╷4 │     background-color: $color-black;│                       ^^^^^^^^^^^^╵  src/components/Header/Header.module.scss 4:23  root stylesheet

Package Json "version": "0.0.1","private": true,"scripts": {"dev": "vite dev","build": "vite build","preview": "vite preview","test": "playwright test","check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","lint": "prettier --plugin-search-dir . --check . && eslint .","format": "prettier --plugin-search-dir . --write ."    },"devDependencies": {"@playwright/test": "^1.28.1","@sveltejs/adapter-auto": "^2.0.0","@sveltejs/adapter-node": "^1.2.4","@sveltejs/kit": "^1.15.9","@sveltejs/vite-plugin-svelte": "^2.1.1","@typescript-eslint/eslint-plugin": "^5.45.0","@typescript-eslint/parser": "^5.45.0","eslint": "^8.28.0","eslint-config-prettier": "^8.5.0","eslint-plugin-svelte": "^2.26.0","prettier": "^2.8.0","prettier-plugin-svelte": "^2.8.1","sass": "^1.62.1","svelte": "^3.54.0","svelte-check": "^3.0.1","tslib": "^2.4.1","typescript": "^5.0.0","vite": "^4.3.0"    },"type": "module"}