Модули стилей в Vite

Модуль стилей берёт имя класса из объекта, и класс на странице не совпадает с именем в файле.

Файл с суффиксом module.css считается модулем стилей. Импорт возвращает объект: ключи совпадают с именами классов в файле, значения - строки для атрибута class в разметке. Зададим оформление для надписи hello:

.hello {
  color: #8e44ad;
  font-weight: bold;
}

Подключим модуль и подставим класс из объекта:

import styles from './greeting.module.css';

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

На экране по-прежнему фиолетовая жирная надпись hello, но в инспекторе элементов у тега другое имя класса - к короткому имени из файла добавлен уникальный суффикс. Так Vite не даёт случайно пересечься правилам из разных модулей. Обращаться к полю объекта нужно так же, как к имени в CSS: styles.hello, а не строкой hello в разметке.

Создайте src/title.module.css с классом .lead и выведите слово focus с классом из объекта импорта.

Сравните имя класса в файле title.module.css и значение атрибута class у элемента на странице.