react使用插件配置px轉換為vw

react配置px轉換為vw

1.下載postcss-px-to-viewport插件

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

2.下載craco (ant design中的）

npm install @craco/craco

3.在項目根目錄創建一個craco.config.js進行配置

const pxtoviewport = require("postcss-px-to-viewport");
module.exports = {
  style: {
    postcss: {
      plugins: [
        // https://github.com/evrone/postcss-px-to-viewport,參考地址
        pxtoviewport({
          unitToConvert: "px",   // 要轉換的單位
          viewportWidth: 375,    // 設計稿寬度
          unitPrecision: 5,      // 保留小數點后幾位
          propList: ["*"],
          viewportUnit: "vw",
          fontViewportUnit: "vw",
          selectorBlackList: ["body"],  // 不需要轉換的標簽寫入，比如body標簽里的不希望轉換的話
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: /node_modules/,
        }),
      ],
    },
  },
};

根據上述步驟你就能配置好px自動轉換vw的文件了，在寫樣式時只需要按照設計稿的樣式（px格式的）寫就行了,只是vw兼容性不如rem