umijs中开启hd后配置的px2rem设置哪些样式转换为rem单位

开启高清hd即使用rem单位，会自动把项目中的所有px单位转换为rem单位，并且根据屏幕大小自动调节html的基础font-size,这样的好处一个网站不同大小分辨率效果基本一样。

先贴一份umi的配置，/config/config.js内容如下
 

// ref: https://umijs.org/config/
import path from 'path';
import px2rem from 'postcss-plugin-px2rem';

export default {
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: {immer: true},
      dynamicImport: {
        webpackChunkName: true,
        loadingComponent: './components/PageLoading/index'
      },
      routes: {
        exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]
      },
      dll: false,
      /* hd即高清方案,移动端开启，pc端不建议开启，会自动转换px为rem,以750为单位1rem=100px=baseFontSize,
       其他屏按宽度计算baseFontSize,例如设计稿为1920，那么baseFontSize=256,rem计算公式为px/256*/
      hd: true,
      fastClick: true,
      history: 'hash',
      metas: [
        {charset: 'utf-8'}
      ],
      locale: {
        enable: true,
        baseNavigator: true,// 为true时，用navigator.language的值作为默认语言
        default: 'zh-CN'//默认语言 zh-CN
      },
      treeShaking: true,
      base: "/",//Specify the base of the react-router to be configured when deploying to a non-root directory
      publicPath: "/",//Specifies the publicPath of the webpack, pointing to the path where the static resource file is located.
      runtimePublicPath: true,//Use the window.publicPath specified in the HTML when the value is true
      title: 'XXXXXXX科技有限公司'
    }]
  ],
  extraPostCSSPlugins: [
    //https://www.npmjs.com/package/postcss-plugin-px2rem
    px2rem({
      rootValue: 256,//开启hd后需要换算：rootValue=designWidth*100/750,此处设计稿为1920，所以1920*100/750=256
      propBlackList:['border','border-top','border-left','border-right','border-bottom','border-radius','font-size'],//这些属性不需要转换
      selectorBlackList:['t_npx']//以包含t_npx的class不需要转换
    })
  ],
  alias: {
    '@': path.resolve(__dirname, 'src')
  },
  //px2rem:{selectorBlackList:['t_npx']},
  hash: true,
  targets: {
    ie: 9 //Default: { chrome: 49, firefox: 45, safari: 10, edge: 13, ios: 10 }
  },
  proxy: {
    "/api": {
      "target": "http://192.168.0.120:8080/",
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}
    }
  }
}

当然上面已经有注释了，通过配置extraPostCSSPlugins下的px2rem选项（https://www.npmjs.com/package/postcss-plugin-px2rem），可以在px转换rem的时候做个性化设置。

那么问题就来了，为什么font-size不想转换，在propBlackList中已经配置了，但是最终还是被转换为rem单位了？

原因通过如下步骤解释：

   看源码    项目根目录\node_modules\umi-plugin-hd\lib\index.js有一段这样的代码

   api.modifyAFWebpackOpts(opts => {
    opts.theme = _objectSpread({}, getThemeConfig(opts.theme), {
      '@hd': '2px'
    }, options.theme || {});
    opts.extraPostCSSPlugins = [...(opts.extraPostCSSPlugins || []), (0, _postcssPluginPx2rem.default)(_objectSpread({
      rootValue: 100,
      minPixelValue: 2
    }, options.px2rem || {}))];
    return opts;
  });

红色部分可以看出，用_postcssPluginPx2rem.default覆盖了extraPostCSSPlugins配置内容，hd依赖的pxtorem插件位于自己内部的node_mudules目录即  项目根目录\node_modules\umi-plugin-hd\node_modules\postcss-plugin-px2rem\lib\index.js

,如果真不想让font-size属性不进行px至rem转换，可以这么来，修改   项目根目录\node_modules\umi-plugin-hd\node_modules\postcss-plugin-px2rem\lib\index.js

var defaultOpts = {
  rootValue: 100,
  unitPrecision: 5,
  selectorBlackList:['t_npx'],
  propWhiteList: [],
  propBlackList:['border','border-top','border-left','border-right','border-bottom','border-radius','font-size'],
  ignoreIdentifier: false,
  replace: true,
  mediaQuery: false,
  minPixelValue: 0
};

就是将默认选项改成项目中配置的内容即可，你会发现font-size在开启高清的时候不进行转换了。

那么又有一个问题如果在某些地方想让font-size转换为rem，在某些地方又不想转怎么办？

本人是这么搞的：在需要转换的地方手动计算好(或写个less函数)rem值贴上去，在不需要的地方就直接用px。

哈哈，记录一下问题，如果对你有帮助动手点个赞！！！