postcss-px-to-viewport 配置 react-vant

172 阅读1分钟

1、安装postcss-px-to-viewport

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

2、根目录建立一个postcss.config.cjs文件 由于react-vant是按照375px来开发的,设计稿是750的话,需要在配置中调整一下设置

// postcss.config.js
const px2viewport = require('postcss-px-to-viewport');

module.exports = () => {
  return {
    plugins: [
      px2viewport({
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        viewportWidth: 375,
        exclude: [/^(?!.*node_modules\/react-vant)/]
      }),
      px2viewport({
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        viewportWidth: 750,
        exclude: [/node_modules\/react-vant/i]
      })
    ]
  }
}