用于css样式中px值放大/缩小n倍的插件

px值放大/缩小n倍

注意：该插件依赖postcss.process(css, { from: file }) 或者使用postcss-loader自动注入file信息，请把该插件放置在px2rem类型的插件前执行

npm install postcss-px-scale Example

const postcss = require('postcss') const pxScale = require('postcss-px-scale') const input = fs.readFileSync("input.css", "utf8") const output = postcss().use(pxScale({ scale: 2, ignoreValue: 1 // 或者ignoreValue: [1] })).process(input).css

before:

.element { font-size: 16px; width: 100px; border: 1px solid #ccc; }

after:

.element { font-size: 32px; width: 200px; border: 1px solid #ccc; } API

pxScale({ scale: 2, includes: 'bxs-ui-vue' }) scale: 放大/缩小倍数，默认值 1，类型 Number units: 匹配需要放大/缩小的单位，默认值 px，类型 String ignoreValue: 需要忽略的数值，如1px，则配置ignoreValue: 1或ignoreValue: [1]，类型 String|Array includes: 仅处理匹配到includes中的文件，默认值 空，类型 String|Array excludes: 不处理匹配到excludes中的文件，默认值 空，类型 String|Array Node

const postcss = require('postcss') const pxScale = require('postcss-px-scale') const input = 'body { font-size: 16px }'; const output = postcss().use(pxScale({ scale: 2, ignoreValue: [1, 2] // 忽略数值为1和2的数值缩放 })).process(input).css Gulp

const gulp = require('gulp') const postcss = require('gulp-postcss') const pxScale = require('postcss-px-scale') gulp.task('default', function () { var processors = [pxScale({ scale: 2 })] return gulp.src('./src/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./dest')) }); Webpack

const pxScale = require('postcss-px-scale') module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader!postcss-loader" } ] }, postcss: function () { return [pxScale({ scale: 2 })] } }