postcss-pxtorem:移动端px自动转为rem
安装:npm install postcss-px2remvue2.x:webpack:npm install postcss-loadervar px2rem = require('postcss-px2rem');module.exports = {module: {loaders: [{test: /\.css$/,...
·
安装:
npm install postcss-px2rem
vue2.x:
webpack:
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})]; //设置基准值,75是以iphone6的标准
}
}
vue3.x:
vue.config.js:
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue : 75, // 换算的基数
// 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI,也会被转化。目前我使用 selectorBlackList字段,来过滤
//如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
selectorBlackList : ['weui','mu'],
propList : ['*'],
}),
]
}
}
},
}
如果是使用 postcss-px2rem:
module.exports = {
lintOnSave: true,
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({remUnit: 30}), // 换算的基数
]
}
}
},
}
gulp:
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'));
});
更多推荐
已为社区贡献2条内容
所有评论(0)