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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
Jinuss1 分钟前
源码分析之React中Scheduler调度器的最小二叉堆
javascript·算法·react.js
a1117764 分钟前
电流卡片特效(html网页 开源)
javascript·css·css3
colicode5 分钟前
语音报警接口开发参考:紧急情况下快速调用语音API发送安全警报
前端·语音识别
狗都不学爬虫_5 分钟前
JS逆向 -最新版 盼之(decode__1174、ssxmod_itna、ssxmod_itna2)纯算
javascript·爬虫·python·网络爬虫·wasm
天天进步20156 分钟前
透明的可观测性:剖析 Motia Workbench 与插件系统架构
javascript
夏河始溢7 分钟前
一八四、Zustand 状态管理详解、与 Redux、MobX 的对比分析
前端·javascript·react.js·状态管理·zustand
wangmengxxw7 分钟前
设计模式 -详解
开发语言·javascript·设计模式
Code小翊13 分钟前
TypeScript 核心语法速查
前端·javascript·typescript
家里有只小肥猫15 分钟前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app
一起养小猫15 分钟前
Flutter for OpenHarmony 实战:科学计算器完整开发指南
android·前端·flutter·游戏·harmonyos