How do you make an alias for the root folder when importing?
E.g. import image from "../../../test.png" to import image from "@/test.png"
#Alias for root folder
silver flint
twilit wolfBOT
Hi @silver flint. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Astro, you can create an alias for the root folder by adding a configuration to either tsconfig.json or jsconfig.json. This allows you to create shortcuts for your imports, which can be particularly useful in codebases with many directories or relative imports.
Here's an example of how you can set up an alias in tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/components/*": ["src/components/*"]
}
}
}
In this example, @/components/* is the alias and src/components/* is the actual path. You can replace src/components/* with the path to your root folder.
After setting up the alias, you can use it in your imports like this:
import Button from '@/components/controls/Button.astro';
Please note that these aliases are integrated automatically into VS Code and other editors.
Sources:
- Astro Aliases Guide (https://docs.astro.build/en/guides/aliases#_top)
- Astro Upgrade Guide (https://docs.astro.build/en/guides/upgrade-to/v1#aliasing)
- Astro TypeScript Guide (https://docs.astro.build/en/guides/typescript#import-aliases)