SvelteKit Configuring a folder to be used as a variable

In SvelteKit, you can create folder aliases using the svelte.config.js file.

Open svelte.config.js file

Under kit add alias

Folder aliases allow you to create shortcuts or virtual paths to specific folders in your project, making it easier to import modules or components from those directories without using relative paths.

import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        alias: {
            '@components': './src/components',
        }
    }
};
export default config;

Using the Folder Alias: After setting up the folder alias, you can now import components or modules using the alias you defined.
For example, if you have a component called Button.svelte inside the src/components folder, you can import it like this:

<script>
  // Importing using the alias '@components'
  import Button from '@components/Button.svelte';
</script>

<main>
  <Button />
</main>