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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
kyriewen4 分钟前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog9 分钟前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒36 分钟前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump1 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss
无风听海1 小时前
OAuth 2.0 前端通道与后端通道深入剖析
前端·oauth
sakiko_1 小时前
UIKit学习笔记8-发送照片、拍摄照片并发送
前端·swift·uikit
_code_bear_1 小时前
OpenSpec CLI 与 OPSX 工作流说明
前端·后端·架构
AI_paid_community1 小时前
98.5k Star!GitHub官方开源的这个工具,正在把"vibe coding"扫进历史的垃圾桶
javascript·claude
AI_paid_community2 小时前
用 Claude Code 写了一年代码,装了这 18 个 Skills 之后,我才知道自己一直在"氛围编程"
javascript·面试