How to override the $lib folder in SvelteKit

How to override the $lib folder in SvelteKit

SvelteKit exposes $lib to eliminate the need of using '../../' while importing components into the routes.

$lib is by default pointing to:

src/lib

As per Svelte default boilerplate, it places the components under this location.

If you would like to place your components in a different directory say src/components, you can do an override in svelte.config.js as follows:

files: {
  // Override default lib folder
  lib: "src/components";
}

Post this your overall config would look something as follows:

import adapter from "@sveltejs/adapter-auto";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),

    // Override http methods in the Todo forms
    methodOverride: {
      allowed: ["PATCH", "DELETE"],
    },
    files: {
      // Override default lib folder
      lib: "src/components",
    },
  },
};

export default config;