项目最层新建pxToRpx.js
yarn add postcss --save-dev
- 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
-
- module.exports = {
- css: {
- loaderOptions: {
- postcss: {
- plugins: [
- require("./pxToRpx.js")({
- times: 2,//转换倍数
- })
- ]
- }
- }
- }
- }