Как импортировать файл CSS в директиве, используемой внутри пользовательского элемента в vue.js? ⇐ CSS

[Anonymous]

Я хочу преобразовать компонент VUE в пользовательский элемент, используя DefineCustomelement . Я получил стиль компонента, работающий, перевернув модуль Tag в , но у меня возникла еще одна проблема. Этот компонент использует директиву, которая добавляет дочерний элемент с классом CSS OnClick и вскоре удаляет ее. В этой директиве используется модуль CSS: < /p>

Код: Выделить всё

import style from "./ripple.module.scss"
const ripples = {
show (
e: VuetifyRippleEvent,
el: HtmlRippleElement,
value: RippleOptions = {}
) {
...

const container = document.createElement("span")
const animation = document.createElement("span")

container.appendChild(animation)
container.className = style['v-ripple__container']
...
animation.className = style['v-ripple__animation']
...
el.appendChild(container)
...
animation.classList.add(style['v-ripple__animation--enter'])
animation.classList.add(style['v-ripple__animation--visible'])
transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
animation.dataset.activated = String(performance.now())

setTimeout(() => {
animation.classList.remove('v-ripple__animation--enter')
animation.classList.add('v-ripple__animation--in')
transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
}, 0)
}
}
const rippleShow = (e: VuetifyRippleEvent) => {
...
const element = e.currentTarget as HtmlRippleElement | undefined
...

value.center = element._ripple.centered || isKeyboardEvent(e)
if (element._ripple.class) {
value.class = element._ripple.class
}

if (isTouchEvent(e)) {
...
} else {
ripples.show(e, element, value)
}
}

const updateRipple = (el: HtmlRippleElement, binding: RippleDirectiveBinding, wasEnabled: boolean) => {
...

el.addEventListener("mousedown", rippleShow)
el.addEventListener("mouseup", rippleHide)
el.addEventListener("mouseleave", rippleHide)
...
}

export const Ripple = {
mounted: (el: HTMLElement, binding: RippleDirectiveBinding) => {
updateRipple(el, binding, false)
},
updated: (el: HTMLElement, binding: RippleDirectiveBinding) => {
if (binding.value === binding.oldValue)
return

const wasEnabled = isRippleEnabled(binding.oldValue)
updateRipple(el, binding, wasEnabled)
},
unmounted: (el: HtmlRippleElement) => {
delete el._ripple
removeListeners(el)
},
}

export default Ripple
< /code>
Директива работает правильно. Он добавляет элемент с суффиксом класса CSS, как класс из модуля CSS, но CSS не загружается должным образом, поэтому на самом деле ничего не визуализируется. Я попытался преобразовать модуль.scss 

в обычный scss и импортировать его в верхней части директивного файла и заменить все экземпляры стиля [''] с «» , но он тоже не работал.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -in-vue-js