Vue3 + Vite: мой класс CSS исчез без предупреждения, куда он делся? ⇐ CSS

[Anonymous]

У меня есть пример таблицы, взятой из https://element-plus.org/en-US/comCompo ... ith-status
Я хотел бы задайте цвет некоторым строкам.
Вот минимальный рабочий пример:

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

type TableRec = {
code: string
from_title: string | null
to_title: string | null
from_title_short: string | null
to_title_short: string | null
}

const tableData : TableRec[] = [
{code:"code01", from_title: "value1", from_title_short: "value1", to_title:null, to_title_short:null},
{code:"code02", from_title: "value2", from_title_short: "value2", to_title:"not null", to_title_short:"not null"},
{code:"code03", from_title: "value3", from_title_short: "value3", to_title:null, to_title_short:null},
]

const rowClassName = ({
row,
rowIndex
}: {
row: TableRec
rowIndex: number
})  => {
if (!row.to_title) {
return "warning-row"
} else {
return "success"
}
}












.el-table .warning-row {
--el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
--el-table-tr-bg-color: var(--el-color-success-light-9);
}

Когда я меняю CSS и сохраняю файл vue, я вижу, что происходит горячая перезагрузка. Запрос выглядит следующим образом:

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

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css");
/* unplugin-vue-components disabled */
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/home/user/projects/test/frontend-admin3/src/components/TranslateCategoryView.vue?vue&type=style&index=0&lang.css"
const __vite__css = "\n.el-table .warning-row {\n  --el-table-tr-bg-color: var(--el-color-warning-light-9);\n}\n.el-table .success-row {\n  --el-table-tr-bg-color: var(--el-color-success-light-9);\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

Сообщений об ошибках или предупреждений не выдается. Я также вижу, что класс alert-row добавлен в
[img]https:/ /i.sstatic.net/fztWMzJ6.png[/img]

Но строки не имеют предупреждающего цвета. Фактически, класс «warning-row» не применяется, поскольку он не существует:
[img]https://i.sstatic .net/ttEaiAyf.png[/img]

Значит, он был загружен, но его не существует? Я не понимаю, что здесь происходит?
Я также пытался разместить этот пример в элементе плюс площадка ( https://element-plus.run/ ). Но, к сожалению, там оно работает отлично:


Я предполагаю, что проблема на моей стороне, но сообщений об ошибках и предупреждений нет, и я не могу выяснить причину.

Подробнее здесь: https://stackoverflow.com/questions/787 ... -did-it-go