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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
前端互助会1 天前
Live2D形象展示与文本语音播报:打造生动交互体验的完整实现
前端·vue.js·microsoft·交互
游戏开发爱好者81 天前
iOS IPA 上传工具全面解析,从 Transporter 到开心上架(Appuploader)命令行的高效上架实践
android·ios·小程序·https·uni-app·iphone·webview
chilavert3181 天前
技术演进中的开发沉思-191 JavaScript: 发展历程(上篇)
开发语言·javascript·ecmascript
努力的小郑1 天前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员
dy17171 天前
el-table表头上下显示内容
javascript·vue.js·elementui
q***64971 天前
头歌答案--爬虫实战
java·前端·爬虫
凌波粒1 天前
SpringMVC基础教程(4)--Ajax/拦截器/文件上传和下载
java·前端·spring·ajax
亮子AI1 天前
给你的应用加上Google账号登录
javascript
液态不合群1 天前
DDD驱动低代码开发:从业务流程到领域模型的全链路设计
前端·低代码·架构·ddd
jonyleek1 天前
JVS低代码开发中,如何创建自定义前端页面并接入到现有系统中,从创建到接入的全攻略
前端·低代码·前端框架·软件开发