Несколько файлов стилей в Vite

Несколько файлов стилей подключают отдельными импортами, и правила складываются.

Разделим оформление на базу и акцент для слова на странице. В первом файле зададим шрифт и цвет фона, во втором - размер текста для класса с надписью hello. Создадим базовый файл:

body {
  margin: 1rem;
  background: #ecf0f1;
}

Добавим файл с акцентом для надписи:

.hello {
  font-size: 2rem;
  color: #16a085;
}

Оба файла импортируем из главного модуля и выведем текст в элемент с классом hello:

import './base.css';
import './accent.css';

const el = document.createElement('p');
el.className = 'hello';
el.textContent = 'hello';
document.body.append(el);

Порядок импортов влияет на каскад при одинаковой специфичности. После перезагрузки вкладки http://localhost:5173 видны и отступы с фоном, и крупная зелёная надпись. Каждый импорт остаётся отдельной строкой в коде, а на странице действуют оба набора правил сразу.

Подключите src/base.css и src/highlight.css с классом .lead для слова focus двумя импортами из src/main.js.

Поменяйте порядок двух импортов местами и проверьте, изменилось ли оформление при конфликте одного свойства.