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: 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。

哈哈，記錄一下問題，如果對你有幫助動手點個贊！！！