This is a postcss plugin of px2rem.
var postcss = require('postcss'); var px2rem = require('postcss-px2rem'); var originCssText = '...'; var newCssText = postcss().use(px2rem({remUnit: 64})).process(originCssText).css; Please see px2rem for more information about the features and usage of px2rem.
npm install gulp-postcss var gulp = require('gulp'); var postcss = require('gulp-postcss'); var px2rem = require('postcss-px2rem'); gulp.task('default', function() { var processors = [px2rem({remUnit: 75})]; return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')); }); npm install postcss-loader var px2rem = require('postcss-px2rem'); module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function() { return [px2rem({remUnit: 75})]; } } npm install grunt-postcss module.exports = function(grunt) { grunt.initConfig({ postcss: { options: { processors: [ px2rem({remUnit: 75}) ] }, dist: { src: 'src/*.css', dest: 'build' } } }); grunt.loadNpmTasks('grunt-postcss'); grunt.registerTask('default', ['postcss']); } - Deps: px2rem@~0.5.0
- Support Animation keyframes (no
/*px*/comment).
- Support Animation keyframes (no
- Deps: postcss@^5.0.0
- Deps: px2rem@~0.4.0
- The generated [data-dpr] rules follow the origin rule, no longer placed at the end of the whole style sheet.
- Optimize 0px, do not generate 3 [data-dpr] rules.
- Do not extend current root node.
- Fix bug while working with webpack loader.
- First release.
MIT