Работа со стилями и файлами

Стили в React-приложениях тесно связаны с обработкой файлов: CSS-файлы импортируются как зависимости, а ссылки на ресурсы внутри CSS (например, шрифты или фоновые изображения) также проходят через сборщик. Это обеспечивает целостность проекта — все ресурсы управляются единообразно.

Импорт CSS-файлов

Глобальные стили подключаются через импорт в JavaScript:

import './styles/global.css';

Сборщик обрабатывает этот файл, включает его в бандл и гарантирует, что стили применятся к приложению. Путь должен быть относительным (начинаться с ./ или ../).

CSS-модули

Для изоляции стилей компонентов используйте CSS-модули:

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

function Button() {
  return <button className={styles.primary}>Клик</button>;
}

Имена классов автоматически хешируются, что предотвращает конфликты. Файл должен иметь расширение .module.css.

Подключение шрифтов через CSS

Шрифты подключаются внутри CSS-файлов с помощью @font-face:

/* src/styles/fonts.css */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/Inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Важно: путь в url() — относительный от CSS-файла к файлу шрифта. Сборщик распознаёт эту ссылку, копирует шрифт в папку сборки и подставляет корректный путь.

Фоновые изображения в CSS

Аналогично шрифтам, фоновые изображения указываются через url():

.header {
  background-image: url('../assets/images/bg.jpg');
}

Сборщик обработает путь, скопирует изображение и заменит url() на хешированный путь. Это работает только если CSS импортирован в JavaScript. Если CSS подключён через <link> из public/, сборщик не увидит зависимость — изображение не попадёт в сборку.

Важные правила

  • Все ресурсы, используемые в CSS (url(...)), должны находиться в src/, а не в public/.
  • Не подключайте CSS через <link href="/styles.css"> в public/index.html, если этот CSS ссылается на локальные файлы — сборщик их проигнорирует.
  • Используйте относительные пути в url() — они разрешаются относительно расположения CSS-файла.

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