最近一个手机web端使用postcss-pxtorem解决像素坐标转rem的问题,由于使用了vant,而UI出图按标准750px像素宽出图。所以为了兼容vant 375px像素宽,所以增加了postcss.config.js 分别对vant模块和项目本身设置不同的基准值,本地开发都没有问题,但是正式环境通过Jenkins打包时发现vant组件整体都缩小了一倍,明显是postcss.config.js 没有生效。

const { sep } = require('path')

module.exports = ({ file }) => {
  // 解决vant设计稿宽度为350px而项目设计稿宽度为750px的问题
  const rootValue = file.dirname.indexOf('node_modules' + sep + 'vant') !== -1 ? 37.5 : 75

  return {
    plugins: {
      autoprefixer: {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue: rootValue,
        propList: ['*']
      }
    }
  }
}

修改配置打印编译时具体文件路径信息,看对应rootValue是否计算错误:

// 解决vant设计稿宽度为350px而项目设计稿宽度为750px的问题
  const rootValue = () => {
    console.log(file.dirname, 'node_modules' + sep + 'vant')
    return file.dirname.indexOf('node_modules' + sep + 'vant') !== -1 ? 37.5 : 75
  }

正式环境上发现编译时使用的vant js却是输出如下日志:

[email protected]@vant/lib node_modules/vant

目录变成奇怪的[email protected]@vant/lib目录,而不是正常node_modules/vant 重新检查了Jenkins配置,发现其打包时使用了cnpm打包,我们知道国内npm比较慢所以很多运维这块使用了cnpm进行了项目打包。但是对于研发来说其实比较拒绝使用该镜像库,因为其对依赖管理做了自己的定制老是爱出一些奇葩问题,问题找到改为npm打包解决!!!!