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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
sg_knight23 分钟前
MinIO自带的Web Console管理后台怎么用?日常管理操作全解
前端·文件管理·minio·ftp·cos·oss
Goodwin24 分钟前
TypeScript 成 AI 应用层标配?GitHub Trending 告诉你2026前端往哪走
前端·人工智能·github
风筝与风待过的地方29 分钟前
Vue2 到 Vue3:性能飞跃与 Diff 算法革命
前端
爱上妖精的尾巴32 分钟前
WPS JS宏编程教程学习笔记目录
前端
前端小咸鱼一条44 分钟前
15.Symbol类型
前端·javascript·vue.js
二十一_1 小时前
炸了!Claude Code 51万行源码全部泄露,我已经拿到了完整代码
前端·langchain·claude
RePeaT1 小时前
npm 依赖版本号中 `^` 和 `~` 到底有什么区别?
前端·javascript·npm
DanCheOo1 小时前
多模型适配:一套代码接 6 家 AI 厂商
前端·ai编程
米丘1 小时前
Node.js 事件循环
前端·javascript·node.js
Forever7_1 小时前
紧急!Axios 被投毒,3亿项目受到影响!教你怎么自查!
前端·axios