PendalF89

Не знаю, насколько это решение правильное, но вдохновившись этим решением, я написал аналогичный плагин для Vite для замены rem на em во всём CSS во Vuetify.

import { type Plugin } from "vite";
import postcss, { Root } from "postcss";

/**
 * @see https://github.com/vuetifyjs/vuetify/issues/12532#issuecomment-2755171940
 */
export default function vuetifyRemToEmPlugin(): Plugin {
  return {
    name: "vite-vuetify-rem-to-em",
    transform(css: string, id: string) {

      // Обрабатываем только файлы, связанные с Vuetify
      if (!id.includes("vuetify") || !id.includes(".css")) {
        return;
      }

      return postcss([
        (root: Root) => {
          root.walkDecls((decl) => {
            if (decl.value.includes("rem")) {
              decl.value = convertRemToEm(decl.value);
            }
          });
        },
      ])
        .process(css, { from: id })
        .then((result) => {
          return {
            code: result.css,
          };
        });
    },
  };
}

function convertRemToEm(value: string): string {
  return value.replace(/(\d*\.?\d+)rem/g, (match, p1) => {
    return `${parseFloat(p1).toFixed(4)}em`;
  });
}

Подключаем плагин к Vite

...
plugins: [
      vuetify(),
      vuetifyRemToEmPlugin()
    ],
...

Теперь можно задать стили глобально в shadow DOM и em будет подхватываться:

html, body, :host, :root {
    font-family: Roboto, sans-serif;
    font-size: 16px;
}