Open OoKyleoO opened 1 week ago
I've fix this with a postcss plugin. For reference
const REM_REGEX = /(\d*.?\d+\s?)(rem)/gi;
const PROCESSED = Symbol("processed");
const remtoEm = (opts = {transformMediaQuery:true, onlyVClasses: true }) => {
// This function converts rem units to em units in CSS declarations and media queries
const { transformMediaQuery = false , onlyVClasses = false } = opts;
return {
postcssPlugin: "postcss-rem-to-em-plugin",
Rule(rule) {
if (onlyVClasses && !hasVClass(rule.selector)) return;
rule.walkDecls(decl => {
if (!decl[PROCESSED]) {
decl.value = decl.value.replace(REM_REGEX, "$1em");
decl[PROCESSED] = true;
}
});
if (transformMediaQuery) {
rule.walkAtRules('media', atRule => {
if (!atRule[PROCESSED]) {
atRule.params = atRule.params.replace(REM_REGEX, "$1em");
atRule[PROCESSED] = true;
}
});
}
},
};
function hasVClass(selector) {
return /.(v-|text-)[^, {]+/.test(selector);
}
};
Im using amfe-flexible and pxtorem to fit mobile view, when introduce vuetify-pro-tiptap on PC, the icon of vuetify grow so big due to the rem css setting. How can I fix this?