px值放大/缩小n倍
npm install postcss-px-scale
const postcss = require('postcss')
const pxScale = require('postcss-px-scale')
const input = fs.readFileSync("input.css", "utf8")
const output = postcss().use(pxScale({ scale: 2 })).process(input).css
before:
.element {
font-size: 16px;
width: 100px;
border: 1px solid #ccc; /*no*/
}
after:
.element {
font-size: 32px;
width: 200px;
border: 1px solid #ccc; /*no*/
}
pxScale({
scale: 2,
includes: 'bxs-ui-vue'
})
scale
: 放大/缩小倍数,默认值1
,类型 Numberunits
: 匹配需要放大/缩小的单位,默认值px
,类型 Stringincludes
: 仅处理匹配到includes
中的文件,默认值 空,类型 String|Arrayexcludes
: 不处理匹配到excludes
中的文件,默认值 空,类型 String|Array
const postcss = require('postcss')
const pxScale = require('postcss-px-scale')
const input = 'body { font-size: 16px }';
const output = postcss().use(pxScale({ scale: 2 })).process(input).css
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'))
});
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 })]
}
}