postcss-px-to-viewport 安裝

npm install --save-dev postcss-px-to-viewport

執行 npm eject 將react配置暴露出來

在 webpack.config.js 中配置

require("postcss-px-to-viewport")({
  unitToConvert: "px",    //需要轉換的單位，預設為"px"
  viewportWidth: 750,   // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
  unitPrecision: 3,       //單位轉換後保留的精度
  propList: [     //能轉化為vw的屬性列表
    "*"
  ],
  viewportUnit: "vw",     // 希望使用的視口單位
  fontViewportUnit: "vw",     //字型使用的視口單位
  selectorBlackList: [],  //需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
  minPixelValue: 1,       //設定最小的轉換數值，如果為1的話，只有大於1的值會被轉換
  mediaQuery: false,      //媒體查詢裡的單位是否需要轉換單位
  replace: true,      //是否直接更換屬性值，而不新增備用屬性
  exclude: /(\/|\\)(node_modules)(\/|\\)/,        //忽略某些資料夾下的檔案或特定檔案，例如 'node_modules' 下的檔案
})