vscode+webpack rem自动转换方案

下包

cnpm install postcss-pxtorem -D

新建rem文件

// 基准大小
const baseSize = 75 // 设置 rem 函数
function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem() // 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

main.js引入

import './rem'

在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码，一般750px的设计稿的根元素大小设置32.

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    //rem设置
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] },
  }
}

vue-cli3.0中配置

 // css预设器配置项
        loaderOptions: {
            css: {
                // options here will be passed to css-loader
            },

            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 32, // 换算的基数
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*'],
                    }),
                ]
            }
        }