var gulp = require('gulp');
var postCss = require('gulp-postcss');
var rpxToViewport = require('postcss-rpx-to-viewport');

gulp.task('css', function () {
    var processors = [
        rpxToViewport()   // layoutWidth default 750, if you layout is 640, use as rpxToViewport({layoutWidth: 640}) 
    ];
    return gulp.src(['build/css/**/*.css'])
        .pipe(postCss(processors))
        .pipe(gulp.dest('build/css'));
});

    var rpxToViewport = require('postcss-rpx-to-viewport');
    
    // webpack config: 
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                        options: {
                            postcss: [
                                rpxToViewport()
                            ],
                        }
                    }
                ],

            }
        ]
    }    

    var rpxToViewport = require('postcss-rpx-to-viewport');

    // webpack config: 
    module: {
      postcss: function () {
          return [rpxToViewport()];
      },
    }    

{
  targetUnit: 'rpx',    // (String) need convert
  outputUnit: 'vw',     // (String) convert to
  layoutWidth: 750,     // (Number) design draft width
  unitPrecision: 5,     // (Number) the decimal numbers
  mediaQuery: false     // (Boolean) convert the unit inside @media(*)
}