手写vite插件之将vue文件里style里面的px转换为rem

最新推荐文章于 2024-06-13 09:59:11 发布

奶昔不会射手

最新推荐文章于 2024-06-13 09:59:11 发布

阅读量347

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lth002/article/details/137561206

版权

文章介绍了如何在Vite项目中使用一个名为vite-plugin-lth-style的插件，该插件针对.vue文件中的模板部分，将px单位转换为基于根值（如16px）的rem单位，提升响应式设计的可维护性。

摘要由CSDN通过智能技术生成

一、编写插件

export default (config = {}) => {
  return {
    transform(content, path) {
      if (!/.vue$/.test(path)) {
        return;
      }
      let temTest = /(<template>)([\s\S]+)(<\/template>)/g;
      let strTest = /(\d+)(px)/g;
      content = content.replace(temTest, (str, p1, p2) => {
        p2 = p2.replace(strTest,(str,p1) =>{
          let rem = Number(p1 / config.rootValue).toFixed(5);
          return `${rem}rem`
        });
        return `<template>${p2}</template>`
      });
      return content;
    },
  };
};

使用

import pluginViteLthStyle from "./plugin/vite-plugin-lth-style.ts";
export default defineConfig({
plugins: [
    pluginViteLthStyle({
      rootValue: 16, //根据多少px来进行转换
    }),
    vue(),
  ],
})