vue-cli4.x(@vue/cli4.x) 项目使用 postcss-px-to-viewport vw 适配

安装

$ npm install postcss-px-to-viewport -D

使用

在 vue.config.js 中配置参数

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px", // 需要转换单位
            viewportWidth: 750, // 宽度
            viewportHeight: 1334, // 高度
            unitPrecision: 3, // 精度
            propList: ["*"], // 转换属性列表
            viewportUnit: "vw", // 单位
            fontViewportUnit: "vw", // 字体单位
            selectorBlackList: ['.ignore', '.hairlines'], // 忽略选择器
            minPixelValue: 1, // 最小值不转换
            mediaQuery: false, // 媒体查询转换单位
            replace: true, // 直接替换属性
            exclude: /(\/|\\)(node_modules)(\/|\\)/, // 忽略 node_modules 文件夹
          })
        ]
      }
    }
  }
}