vue里使用px2rem

安装#

yarn add postcss-px2rem

配置#

在vue.config.js中添加以下配置

const px2rem = require('postcss-px2rem')

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          px2rem({
            // 基准大小 baseSize,建议写100 因为可以根据1rem=100px 快速算出设计图的尺寸
            remUnit: 100
          })
        ]
      }
    }
  },
}

重启服务就即可（在开发的时候依然也px，它在编译的时候自动转换为rem，当不想让它转换可以写大写的PX）