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