使用px2rem-loader实现vue项目自动转换px为rem

之前转载过一篇《【转载】Vue 项目自动转换 px 为 rem，高保真还原设计图》使用的是 postcss 的插件postcss-pxtorem，这次介绍另外一个插件px2rem-loader

安装 px2rem-loader

npm install px2rem-loader --save-dev

配置 px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    sourceMap: options.sourceMap,
    // NOTE: 配置 px2rem-loader
    // 在css-loader前应用的loader数目，默认为0.
    // 如果不加这个，@import的外部css文件不能正常转换。
    // 如果还不行可以试着调大数字。更改后必须重启项目，否则不生效！！！
    importLoaders: 10,
  },
}

importLoaders 也可以直接加载 loader 后面 loader: 'css-loader?importLoaders=1'

// NOTE: 配置 px2rem-loader
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 32,
  },
}

更多 px2rem 的用法可以参考：px2rem

直接写 px，编译后会直接转化成 rem —- 除开下面两种情况，其他长度用这个
在 px 后面添加/*no*/，不会转化 px，会原样输出。 — 一般 border 需用这个
在 px 后面添加/*px*/,会根据 dpr 的不同，生成三套代码。—- 一般字体需用这个

创建rem.js文件

// 基准大小
const baseSize = 32
// 设置 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()
}

rem.js 文件中的baseSize和 px2remLoader 中的remUnit是对应的。

如果不想使用 rem.js 这种简单粗暴的粗略计算，更进一步的可以使用lib-flexible、hotcss这两个过渡方案。

如果你的项目不是必须兼容低版本的可以考虑使用vw来做适配：《如何在 Vue 项目中使用 vw 实现移动端适配》。