项目最层新建pxToRpx.js
javascript
yarn add postcss --save-dev
javascript
pxToRpx.js的代码
const postcss = require('postcss');
module.exports = postcss.plugin('postcss-px2rpx', function(opts) {
opts = opts || {};
var timesBigger = opts.times || 2;
return function(root) {
root.walkDecls(decl => {
const val = decl.value;
if (val.indexOf('px') > -1) {
decl.value = val.replace(/(\d+)px/g, function(match, num) {
return num * timesBigger + 'rpx';
});
}
});
};
});
配置vue.config.js
javascript
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("./pxToRpx.js")({
times: 2,//转换倍数
})
]
}
}
}
}