Введение в стили в Vite

Стили в Vite подключают импортом из модуля, и сервер сам добавляет их на страницу.

Страница по-прежнему начинается с index.html и модуля src/main.js с атрибутом type="module". Отдельный тег link для своих правил не нужен: достаточно строки import с путём к файлу стилей внутри JavaScript. Сервер разработки обрабатывает такой импорт, отдаёт CSS браузеру и вставляет его на страницу, пока открыта вкладка с проектом.

Файл с расширением css можно импортировать ради эффекта, без экспорта значений. Несколько импортов складывают правила в общий порядок каскада. Если имя файла содержит module.css, импорт возвращает объект с именами классов, а на элементе в разметке оказывается другое имя - так изолируют стили компонента.

Готовые библиотеки из node_modules подключают тем же способом, что и свой файл в src. Препроцессор Sass понадобится только когда файл имеет расширение scss: пакет sass переводит синтаксис при импорте, без отдельной команды в скриптах. При сборке стили не остаются текстом внутри JavaScript: они выносятся в отдельный файл рядом со скриптом в dist.