コンテンツにスキップ

Astroプロジェクトでimportエイリアスを使う

問題

Astroプロジェクトでは、importで相対パスを指定する必要がある。 そのため、ファイルを移動したときは、importのパスも修正する必要がある。

例えば、ファイル構成が以下のようになっているとする。

src/
├── components/
│   └── MyComponent.astro
└── pages/
    ├── my-page.astro
    └── sub-pages/

このとき、my-page.astroからMyComponent.astroをimportするには以下のように書く。

src/pages/my-page.astro
---
import MyComponent from "../components/MyComponent.astro";
---

ここで、my-page.astroをsrc/pages/からsrc/pages/sub-pages/に移動した場合、importのパスも修正する必要がある。

src/pages/sub-pages/my-page.astro
---
import MyComponent from "../../components/MyComponent.astro";
//                       ^^^^^^ この部分を修正する必要がある。
---

ファイルを移動するたびにimportのパスを修正するのは手間がかかるので、importでプロジェクトルートを基準にしたパスを指定したい。

対応方法

tsconfig.json（またはjsconfig.json）に以下の設定を追加する。

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      // 他のエイリアスも追加したい場合はここに追加する。
      "@layouts/*": ["src/layouts/*"],
      ...
    }
  }
}

この設定を追加することで、importで@componentsを使って、プロジェクトルートを基準にしたパスを指定できるようになる。

src/pages/my-page.astro
---
import MyComponent from "@components/MyComponent.astro";
---

参考リンク