一、需求描述

1、之前使用scss ，npm 构建之后会自动生成.wxss；
2、scss 自动转换的是px，但是想要自动适配屏幕的rpx
3、如果要手动改太麻烦了，首先想到的是使用glup 跑一个任务
4、使用插件postcss-pxtorpx-pro 自动转换

二、安装插件glup、glup-postcss、postcss-pxtorpx-pro

1、glup 必须全局安装

npm i -g gulp

2、glup-postcss

npm install gulp-postcss  --save-dev

3、postcss-pxtorpx-pro

npm i postcss-pxtorpx-pro

三、在package.json 里配置

  "scripts": {
    "build": "gulp css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

四、根目录下新建gulpfile.js

项目目录如下：

1692343704503.png

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtorpx = require('postcss-pxtorpx-pro');
gulp.task('css', function () {
  var processors = [
    pxtorpx({
      // 转化的单位
        unit: 'rpx',
        // 单位精度
        unitPrecision: 5,
        // 不需要处理的css选择器
        selectorBlackList: [],
        // 不需要转化的css属性
        propBlackList: [], 
        // 直接修改px，还是新加一条css规则
        replace: true,
        // 是否匹配媒介查询的px
        mediaQuery: false,
        // 需要转化的最小的pixel值，低于该值的px单位不做转化
        minPixelValue: 0,
        // 不处理的文件
        exclude: null,
        // 转化函数
        // 默认设计稿按照750宽，2倍图的出
        transform: (x) => 2*x
    })
];
return gulp.src(['miniprogram/pages/**/*.wxss'])
    .pipe(postcss(processors))
    .pipe(gulp.dest('miniprogram/pages'));
});