Импорт стилей в Vite
Импорт файла CSS из модуля применяет правила к странице без тега link.
Пусть на странице выводится слово
hello
из src/main.js.
Оформление вынесем
в отдельный файл стилей
и подключим его импортом.
Путь пишут относительно модуля,
как у обычного JavaScript-файла.
Сначала зададим цвет текста:
body {
color: #c0392b;
}
Импорт без фигурных скобок только подключает файл. Добавим строку в точку входа:
import './style.css';
document.body.textContent = 'hello';
Запустим сервер разработки
командой npm
с подкомандой run
и именем dev,
если он ещё не работает,
и откроем
http://localhost:5173.
Текст на экране станет красноватым,
хотя в index.html
нет тега link
со стилями.
Правила пришли вместе
с цепочкой модулей.
Выведите на страницу слово note и задайте для body цвет #2c3e50 через импорт src/style.css из src/main.js.
Откройте инструменты разработчика и убедитесь, что стили появились на странице без тега link в index.html.
