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,//转换倍数
					})
				]
			}
		}
	}
}
相关推荐
qianmoQ20 分钟前
第五章:工程化实践 - 第三节 - Tailwind CSS 大型项目最佳实践
前端·css
C#Thread25 分钟前
C#上位机--流程控制(IF语句)
开发语言·javascript·ecmascript
尚学教辅学习资料29 分钟前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游
椰果uu35 分钟前
前端八股万文总结——JS+ES6
前端·javascript·es6
微wx笑1 小时前
chrome扩展程序如何实现国际化
前端·chrome
~废弃回忆 �༄1 小时前
CSS中伪类选择器
前端·javascript·css·css中伪类选择器
CUIYD_19891 小时前
Chrome 浏览器(版本号49之后)‌解决跨域问题
前端·chrome
IT、木易1 小时前
跟着AI学vue第五章
前端·javascript·vue.js
薛定谔的猫-菜鸟程序员1 小时前
Vue 2全屏滚动动画实战:结合fullpage-vue与animate.css打造炫酷H5页面
前端·css·vue.js
春天姐姐2 小时前
vue3项目开发总结
前端·vue.js·git