Библиотека стилей в Vite

Библиотека стилей подключается тем же импортом, что и свой файл, из каталога пакетов.

Пакет normalize.css выравнивает базовые стили элементов в разных браузерах. Его ставят через менеджер пакетов в проект с Vite. Выполним установку:

npm install normalize.css

После установки файлы лежат в node_modules/normalize.css. В JavaScript достаточно указать имя пакета без относительного пути - сборщик найдёт главный CSS сам. Свой файл задаст цвет для слова hello:

body {
  color: #2980b9;
}

Подключим библиотеку и свой стиль в главном модуле:

import 'normalize.css';
import './style.css';

document.body.textContent = 'hello';

Правила normalize применятся вместе с локальным цветом в зависимости от порядка импортов, но способ подключения тот же, что у ./style.css. Откроем страницу на сервере разработки и убедимся, что базовые отступы у заголовков и абзацев уже согласованы библиотекой.

Установите normalize.css и импортируйте пакет строкой normalize.css в src/main.js перед своим src/app.css со словом focus на странице.

Временно уберите импорт библиотеки и перезагрузите вкладку, чтобы заметить отличие базовых отступов у body.