Configure aliases in Svelte Kit

Alias allows us to simplify file path. For example, we can set a component path to access components. Instead of using relative path we can use the new alias.

Alias helps us to avoid ../../../ nonsense. 😆 $lib also help to achieve the same.

Let's setup a component alias in servlte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter(),
		alias: {
		components:'src/components',
		 
		}
	},
	preprocess: [preprocess({
		postcss: true,
	  }),],
};

export default config;
 

In any component we can import components using the component alias as follows.

 //+layout.svelte
<script>
import Navabar from "components/Navbar.svelte"
<script> 

<div> 
 <Navbar/>
<slot/>
</div>