Issue with Svelte Configuration: Implicit “any” in TypeScript and Unrecognized Global SCSS Variables

I’m working on a SvelteKit project and encountering two main issues:

  1. Implicit “any” TypeScript Error:
    Even though I’m using JavaScript in my project, I’m seeing a TypeScript error Parameter '' implicitly has an 'any' type.ts(7006) in my code. It seems like TypeScript is checking for types in my JavaScript files, even though I haven’t explicitly used TypeScript in my project.

  2. Unrecognized Global SCSS Variables:
    I’m importing global SCSS variables using sveltePreprocess in my svelte.config.js file. However, when I try to use these variables in my .svelte files, I receive an error saying Error: Undefined variable. Despite this error, the code runs and functions correctly, but I’m concerned about why these variables are not being recognized during the build process.

Here’s my svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import { sveltePreprocess } from 'svelte-preprocess';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        vitePreprocess(),
        sveltePreprocess({
            typescript: {
                compilerOptions: {
                    noImplicitAny: false
                }
            },
            scss: {
                prependData: `
                    @import 'src/assets/scss/global.scss';
                    @import 'src/assets/scss/variables.scss';
                `
            }
        })
    ],

    kit: {
        adapter: adapter()
    }
};

export default config;
  • For the TypeScript Issue:
    I attempted to suppress the implicit any errors by setting noImplicitAny: false in the TypeScript configuration within sveltePreprocess. However, the error still appears in my JavaScript files (and also <script> in .svelte files). I expected this configuration to prevent TypeScript from checking types in these files, but it doesn’t seem to be working as intended.

  • For the SCSS Variables Issue:
    I expected that by using prependData to import my global SCSS files (global.scss and variables.scss), the variables defined within them would be globally available in all my .svelte files. However, when I reference these variables, I get an Undefined variable error, even though the code still compiles and runs correctly. I’m not sure if the issue is related to how the SCSS is being processed or if there’s something else I’m missing in the configuration.

Any guidance or solutions to these issues would be greatly appreciated!