postcss 微信小程序 px 转 rpx 支持propo

小程序 px 2 rpx 使用方法 npm install wx-px2rpx 或者 yarn install wx-px2rpx gulp 配置 更多功能后续开发。。。

let gulp = require('gulp') let less = require('gulp-less') let rename = require('gulp-rename') let postcss = require('gulp-postcss') let px2rpx = require('wx-px2rpx') gulp.task('less', function () { var processors = [px2rpx()]; //编译src目录下的所有less文件 gulp.src(['pages/**/*.less']).pipe(less()) .pipe(postcss(processors)) .pipe(rename({ extname: '.wxss' })).pipe(gulp.dest('pages/')) })

css 源码

.page { padding: 0 30px; font-size: 0; color: #000; } .logo { display: block; margin: 0 auto 30px auto; width: 150px; height: 150px; border-radius: 75px; }

编译结果

.page { padding: 0 30rpx; font-size: 0; color: #000; } .logo { display: block; margin: 0 auto 30rpx auto; width: 150rpx; height: 150rpx; border-radius: 75rpx; } 配置参数 proportion: 转换比例 Created By wangwang jinker

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。