uniapp ui库 px 转 rpx

项目最层新建pxToRpx.js

javascript 复制代码
yarn add postcss --save-dev
javascript 复制代码
pxToRpx.js的代码

const postcss = require('postcss');

module.exports = postcss.plugin('postcss-px2rpx', function(opts) {
	opts = opts || {};
	var timesBigger = opts.times || 2;
	return function(root) {
		root.walkDecls(decl => {
			const val = decl.value;
			if (val.indexOf('px') > -1) {
				decl.value = val.replace(/(\d+)px/g, function(match, num) {
					return num * timesBigger + 'rpx';
				});
			}
		});
	};
});

配置vue.config.js

javascript 复制代码
module.exports = {
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require("./pxToRpx.js")({
						times: 2,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
董员外25 分钟前
LangChain.js 快速上手指南:模型接入、流式输出打造基础
前端·javascript·后端
AomanHao29 分钟前
基于高德地图JS的旅游足迹,可嵌入个人博客中
前端
用户40993225021230 分钟前
Vue3组件开发中如何兼顾复用性、可维护性与性能优化?
前端·vue.js·trae
千寻girling31 分钟前
面试官 : “ 请问你实际开发中用过 函数柯理化 吗? 能讲一下吗 ?”
前端·javascript·面试
golang学习记32 分钟前
Claude Opus 4.6 正式发布:Agent 时代的编程王者与长上下文革命
前端·人工智能·后端
双向3335 分钟前
RAG实战解密:三步构建你的智能文档问答系统(附开源方案)
前端
DEMO派1 小时前
前端CSRF攻击代码演示及防御方案解析
前端·csrf
change_fate1 小时前
vite 修改base之后需要修改public路径
javascript·vue.js
REDcker1 小时前
Media Source Extensions (MSE) 详解
前端·网络·chrome·浏览器·web·js
阿珊和她的猫2 小时前
Chrome 的 SameSite 属性:原理与解决方案
前端·chrome