Using Astro Aliases
21 February 2022
Using aliases is a great way to make your import paths a bit more readable.
Start by initializing an Astro site:
bash
npm init astro -- --template blog-multiple-authors
Edit the tsconfig
file to include the global path:
json
{"compilerOptions": {"moduleResolution": "node","baseUrl": ".","paths": {"@/*": ["src/*"]}}}
Now you’re able to use import paths. For example, you can rewrite imports of the src/pages/index.astro
file:
ts
import MainHead from '@/components/MainHead.astro';import Nav from '@/components/Nav.astro';import Pagination from '@/components/Pagination.astro';import PostPreview from '@/components/PostPreview.astro';import authorData from '@/data/authors.json';
You can learn more about aliases in the docs.