Я использую веб-пакет для создания одного пакета. js файл, содержащий все, что мне нужно, в одном файле, и веб-пакет компилируется и, кажется, содержит то, что я ожидаю. Я динамически генерирую элементы DOM в javascript, которые я хотел бы отформатировать с помощью существующих спецификаций класса sass следующим образом:
index.s css:
.classname {
position: 'absolute';
font-family: 'Roboto', sans-serif;
color: blue;
}
index. js:
import styles from './css/index.scss';
console.log(styles);
let aDiv = document.createElement("div");
aDiv.classList.add("classname");
aDiv.style.top = "10px";
document.body.append(aDiv);
let bDiv = document.createElement("div");
bDiv.classList.add(styles.classname);
aDiv.style.top = "30px";
document.body.append(bDiv);
В инструментах разработчика Firefox из консоли я вижу, что стили - это объект со свойством для каждого из множества правил css, одно из которых:
"classname": "_2mpyBRPOMJ9D3LKNxOIvrs"
В инструменте Inspector Firefox класс aDiv является "classname", но стили из этого класса не применяются. Класс bDiv не определен, и там тоже не применяются стили. Я не могу понять, как получить имя класса "_2mpyBRPOMJ9D3LKNxOIvrs", которое отличается каждый раз, когда я компилирую, назначенное как класс. Но даже когда я делаю это вручную из Firefox, стили никогда не применяются, и в редакторе стилей Firefox не существует ни "classname", ни "_2mpyBRPOMJ9D3LKNxOIvrs".
Возможно ли динамическое создание элемент, который наследует стили от s css через его имя класса? Или есть лучший способ сделать это, чего мне не хватает? Я чувствую, что, должно быть, мне не удалось набрать asp центральный t enet веб-упаковки css в js.