Справочник по импортам

Astro поддерживает большинство статических ресурсов без дополнительной настройки. Вы можете использовать инструкцию import в любом JavaScript-коде проекта, и Astro включит оптимизированную копию этого ресурса в итоговую сборку.

Поддерживаемые типы файлов

Astro поддерживает следующие типы файлов «из коробки»:

Компоненты Astro (.astro)
Markdown (.md, .markdown)
JavaScript (.js, .mjs)
TypeScript (.ts, .tsx)
NPM-пакеты
JSON (.json)
CSS (.css)
CSS-модули (.module.css)
Изображения и ресурсы (.svg, .jpg, .png и др.)

Дополнительно можно добавить поддержку JSX через интеграции фреймворков (React, Svelte, Vue), а также MDX или Markdoc.

Файлы в папке `public/`

Любой статический ресурс можно разместить в папке public/. Astro просто скопирует эти файлы в итоговую сборку без изменений.

// Ссылка на файл /public/report.pdf
<a href="/report.pdf">Скачать PDF</a>

// Отображение /public/cat.jpg
<img src="/cat.jpg" alt="Кот">

Инструкции импорта

TypeScript

Astro включает встроенную поддержку TypeScript. Вы можете импортировать .ts и .tsx файлы напрямую.

Astro не выполняет проверку типов самостоятельно. Для этого используйте возможности вашей IDE или команду astro check.

JSON

import json from './data.json';

Astro поддерживает прямой импорт JSON-файлов. Импортированный файл возвращает объект данных.

CSS

import './style.css';

Импорт CSS-файла автоматически добавит его стили на страницу. Это работает для всех CSS-файлов по умолчанию.

CSS-модули

import styles from './style.module.css';

return <div className={styles.error}>Сообщение об ошибке</div>;

Astro поддерживает CSS-модули с использованием соглашения [name].module.css. Импорт возвращает объект styles, где ключи — это оригинальные имена классов, а значения — уникальные идентификаторы.

Псевдонимы (Aliases)

Псевдонимы позволяют создавать короткие пути для импортов, что удобно в больших проектах.

Настройте их в tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["./src/components/*"],
      "@assets/*": ["./src/assets/*"]
    }
  }
}

Теперь вы можете использовать их везде:

---
import Button from '@components/Button.astro';
---

`import.meta.glob()`

import.meta.glob() — это способ импортировать множество файлов сразу с помощью глоб-шаблонов.

---
// Импортируем все Markdown-файлы из папки posts
const posts = Object.values(import.meta.glob('../pages/post/*.md', { eager: true }));
---
<div>
{posts.map((post) => (
  <article>
    <h2>{post.frontmatter.title}</h2>
    <a href={post.url}>Читать далее</a>
  </article>
))}
</div>

Встроенные модули Node

Astro поддерживает встроенные модули Node.js (например, node:fs или node:util) с использованием префикса node:. Обратите внимание, что некоторые модули могут быть несовместимы с определенными средами выполнения (например, Cloudflare Workers).

---
import util from 'node:util';
---