Vite: Import path alias only setting tsconfig.json
TK
Posted on June 22, 2022
Hello!! These days I usually use vite. And I usually set alias but, in generally we need to set alias to tsconfig.json and vite.config.ts. I think it is too trouble!!
If you want configure only tsconfig.json, I recommand this article.
The problem can be solved by vite-tsconfig-paths package.
1. You need to install the package via below command
npm i -s vite-tsconfig-paths
2. Plese configure vite.config.ts like below
export default defineConfig({
//... some configs
plugins: [tsconfigPaths()],
//... some configs
})
3. Plese configure tsconfig.json which you like. Below is my sample
{
"compilerOptions": {
"paths": {
"@": ["src"],
"@/*": ["src/*"],
"$lib":["src/lib"],
"$lib/*":["src/lib/*"]
}
}
}
4. Done
Note
You can use vite-tsconfig-paths on SvelteKit project. And it doesn't work, plese try delete generated folder for dev server like .svelte-kit
.
Thank you for reading this article!!
💖 💪 🙅 🚩
TK
Posted on June 22, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.