Using Astro Aliases

Using aliases is a great way to make your import paths a bit more readable.

Start by initializing an Astro site:

npm init astro -- --template blog-multiple-authors

Edit the tsconfig file to include the global path:

{
  "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:

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 ↗.