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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
my_styles2 分钟前
window系统安装/配置Nginx
服务器·前端·spring boot·nginx
神奇的程序员16 分钟前
不止高刷:明基 RD280UG 在编码场景下的表现如何
前端
Rabbit_QL25 分钟前
【音频处理】从 AirPods 主动降噪到音频 Source Separation:同一个问题的两种工程解法
前端·人工智能·音视频
-孤存-29 分钟前
Spring Bean作用域与生命周期全解析
java·开发语言·前端
hello kitty w39 分钟前
3.小程序方法的封装
javascript·小程序
QEasyCloud202240 分钟前
WooCommerce 独立站系统集成技术方案
java·前端·数据库
小宋10211 小时前
从 Kafka 告警到前端实时可见:SSE 在故障诊断平台中的一次完整落地实践
java·前端·kafka
jerrywus1 小时前
告别手动调试!用 Flutter MCP 让 AI 直接操控你的 App
前端·claude·mcp
浮桥1 小时前
uniapp + h5实现悬浮活动按钮组件
前端·javascript·uni-app
Web_Lys1 小时前
css设置滚动条样式不生效【antDesign UI Table滚动条样式无法自定义 解决方案】
前端·css