A plugin for that generates rpx units from pixel units, it also can generate units which you want.
English | 简体中文
A plugin for PostCSS that generates rpx units from pixel units, it also can generate units which you want.
$ npm install postcss-px2units --save-dev
With the default settings, we will get this output.
/* input */
p {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px; /* no */
}
/* output */
p {
margin: 0 0 20rpx;
font-size: 32rpx;
line-height: 1.2;
letter-spacing: 1px;
}
var fs = require('fs');
var postcss = require('postcss');
var pxtorem = require('postcss-pxtorem');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
replace: false
};
var processedCss = postcss(pxtorem(options)).process(css).css;
fs.writeFile('main-rem.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('Rem file written.');
});
Type: Object | Null
Default:
{
divisor: 1,
multiple: 1,
decimalPlaces: 2,
comment: 'no',
targetUnits: 'rpx'
}
Detail:
width: 100px
, we will get the vaule is Number(100 / divisor * multiple).toFixed(decimalPlaces)
.width: 100px; /* not replace */
will be translated to width: 100px;
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtounits = require('postcss-pxtounits');
gulp.task('css', function () {
return gulp.src('./test/src/css/**/*.css')
.pipe(postcss([pxtounits()]))
.pipe(gulp.dest('./test/dist/css'));
});
If you want to use it in WePY, please use wepy-plugin-px2units.