Vue px转rem

常用：px2rem-loader、postcss-px2rem、postcss-pxtorem

 

postcss-plugin-px2rem官方文档：https://www.npmjs.com/package/postcss-plugin-px2rem

postcss-pxtorem官方文档：https://www.npmjs.com/package/postcss-pxtorem

postcss-px2rem官方文档：https://www.npmjs.com/package/postcss-px2rem

 

那么他们有什么区别呢？

•   px2rem-loader 默认只转换内部css文件，可设置转换外部
•   postcss-px2rem 可以把所有文件的px转换位rem 包括框架

 

px2rem-loader 使用

npm install px2rem-loader --save

vue-cli 2.0 默认转换所有样式

// vue-cli 2.0
// build/utils.js

const px2remLoader = {
   loader: 'px2rem-loader',
   options: {
     remUnit: 75
   }
 }

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader,px2remLoader]

if (loader) {
  ...
}
...

 vue-cli 3.0 默认只转换内部样式，ui框架不会被转换

// vue-cli 3.0
// vue.config.js
module.exports = {
...
    chainWebpack: config => {
        config.module
            .rule('css')
            .test(/\.css$/)
            .oneOf('vue')
            .resourceQuery(/\?vue/)
            .use('px2rem')
            .loader('px2rem-loader')
            .options({
                remUnit: 75
            })
    }
...
}

  

postcss-px2rem使用

npm install postcss-px2rem --save

vue-cli 2.0 默认只转换内部样式，ui框架不会被转换

// vue-cli 2.0
// build/vue-loader.conf.js


const px2rem = require('postcss-px2rem')

module.exports = {
    ...
    postcss: function() {

        return [px2rem({ remUnit: 37.5 })]; // ui尺寸375，根据自身情况自行设置

    }
}

vue-cli 3.0 默认转换所有样式

// vue-cli 3.0

// postcss.config.js
// 单独设置cube-ui内样式转换
module.exports = ({ file }) => {
  let remUnit
  if (file && file.dirname && file.dirname.indexOf('cube') > -1) {
    remUnit = 37.5
  } else {
    remUnit = 75
  }
  return {
    plugins: {
      autoprefixer: {},
      'postcss-px2rem': {
        remUnit
      }
    }
  }
}

或者

// vue.config.js
// 转换所有
module.exports = {
...
    css: {
        loaderOptions: {
            ...
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ remUnit: 30 }), // 换算的基数
                ]
            }
        }
    },
...

}

 

postcss-pxtorem使用 （默认转换所有样式）

npm install postcss-pxtorem --save

selectorBlackList 可过滤ui框架，使（cube-ui、vant-ui）等框架中px单位不转换成rem（局限：固定开头类型，例如 cube-ui 样式开头为 cube- ）

// vue-cli 2.0
// .postcssrc.js

module.exports = {
    "plugins": {
        ...
        "postcss-pxtorem": {
            rootValue: 37.5, // ui尺寸375，根据自身情况自行设置
            unitPrecision: 5, // 最小精度，小数点位数
            propList: ['*', '!font*'], // !不匹配属性（这里是字体相关属性不转换）
            selectorBlackList: ['cube'], // 过滤class开头
            minPixelValue: 2 // 替换的最小像素值
        }
    }
}

// vue-cli 3.0
// vue.config.js

module.exports = {
...
    css: {
        loaderOptions: {
            ...
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 30, // 换算的基数
                        selectorBlackList: ['cube'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
...

}