Файл стилей в сборке в Vite
В сборке стили выходят отдельным файлом, а не остаются текстом внутри скрипта.
На сервере разработки CSS
подключается вместе с модулями,
и это удобно для правок.
Команда сборки готовит
статический набор для хостинга.
Стили из импортов
выносятся в свой файл
с расширением css,
a в index.html
из dist
появляется тег link
с атрибутом rel="stylesheet".
Имя такого файла
содержит хеш версии -
как у JavaScript после сборки.
Подготовим исходники
со словом hello:
body {
color: #27ae60;
}
Подключим стили и текст в главном модуле:
import './style.css';
document.body.textContent = 'hello';
Выполним сборку:
npm run build
Откроем папку dist.
Внутри assets
лежит как минимум один файл
.css
и JavaScript с хешем в имени.
Точное имя CSS
задаёт Vite при каждой сборке,
его не нужно прописывать
в исходниках вручную.
В собранном index.html
есть ссылка на этот файл стилей,
а внутри бандла скрипта
нет длинного текста правил -
они уже вынесены отдельно.
Так браузер кэширует
стили и код независимо.
Соберите проект со словом focus и классом .lead в src/style.css, подключённом из src/main.js.
Откройте dist/index.html и папку dist/assets, найдите тег link со стилями и отдельный файл .css.
