Import svelte components using an alias: @

Learn how to configure rollup to import Svelte components using an alias.

Firmino
Firmino Changani

If you just landed on Svelte's world coming from Vue.js, like me you probably miss the ability to import components or other source code files using the @ symbol, just like this:

import ChatInput from "@/components/ChatInput";
import "@/assets/main.css";

// Instead of

import ChatInput from "../../components/ChatInput";
import "../../assets/main.css";

A project generated with vue/cli uses webpack to resolve @/ to src/ folder. If you're using the base template from Svelte, you can have this feature too, with a few changes on Rollup configuration file.

Updating rollup.config.js

Rollup by default doesn't support aliases, but it has an official plugin that enables it, which is called @rollup/plugin-alias. Let's install it then:

npm install --save-dev @rollup/plugin-alias

Inside rollup.config.js file located in project root, import the alias plugin and the path module from Nodejs:

import alias from "@rollup/plugin-alias";
import path from "path";

Rollup's configuration file exports an object. Look for the property plugins inside the exported object, and then add following declaration:

alias({
  entries: [
    {
      find: "@",
      replacement: path.resolve(__dirname, "src/"),
    },
  ],
});

In the code above I am configuring a new alias, this plugin suports multitple alias, and the one I defined, will look for @ symbol in any import declaration and then in compile time, will replace it by the full directory path to the src folder thanks to path.resolve(__dirname, "src/").

That's it, after these small changes, you will be able to import components using @ as an alias for the src/ folder.

References

rollup svelte