Стили и статические файлы

Стили и картинки в проекте обрабатывает Vite: он собирает CSS, добавляет к именам файлов хеш для кеширования и подставляет правильные адреса. От вас требуется только импортировать файл в нужном месте.

Общие стили

Шаблон уже подключает файл app/app.css в app/root.tsx строкой import "./app.css";. Всё, что вы туда допишете, действует на всех страницах:

/* app/app.css */
.flash {
  padding: 8px 12px;
  background: #e6f4ea;
  border-radius: 6px;
}

Флеш-сообщение «Статья опубликована» из урока про сессии получит зелёный фон. Шаблон по умолчанию также настраивает Tailwind CSS — служебные классы вроде p-4 и text-xl можно писать прямо в className. Если Tailwind не нужен, удалите его строку из app/app.css и плагин из vite.config.ts.

Стили одного маршрута

Чтобы стили статьи загружались только на её странице, импортируйте файл с суффиксом ?url и верните его из links:

// app/routes/post.tsx
import type { Route } from "./+types/post";
import postStyles from "./post.css?url";
 
export const links: Route.LinksFunction = () => [
  { rel: "stylesheet", href: postStyles },
];

?url просит Vite вернуть не содержимое, а адрес готового файла. Тег link с ним появится в head только на страницах статей.

CSS-модули

Файл с окончанием .module.css превращается в объект, а имена классов становятся уникальными:

/* app/components/PostCard.module.css */
.card {
  border: 1px solid #ddd;
  padding: 16px;
}

// app/components/PostCard.tsx
import styles from "./PostCard.module.css";
 
export function PostCard({ title }: { title: string }) {
  return <div className={styles.card}>{title}</div>;
}

Класс card не столкнётся с одноимённым классом в другом файле.

Картинки и папка public

Импортированная картинка получает адрес с хешем, и браузер всегда загрузит свежую версию. Файлы из public/ копируются в сборку как есть.

Частая ошибка

Писать в коде путь src="/public/logo.png". Содержимое папки public/ раздаётся из корня сайта, поэтому правильный адрес — /logo.png. С лишним /public картинка не найдётся ни в разработке, ни после сборки.