react(craco)移动端使用postcss-px-to-viewport自适应布局

Craco 使用postcss-px-to-viewport

"devDependencies": {
    "@craco/craco": "^6.4.3",
    "@xianzhengquan/postcss-px-2-vw": "^0.0.1",
    "postcss": "^8.3.0"
  },
  "peerDependencies": {
    "@craco/craco": "^6.4.3",
    "postcss": "^8.3.0"
  }

本文针对的是postcss 8.x的情况，其他没有尝试，不废话上代码，最后再说为什么，有兴趣的朋友可以继续看
craco.config.js

const CracoLessPlugin = require('craco-less')
const logWebpackConfigPlugin = require('./craco-plugin-log-webpack-config')
// const {
//   when,
//   whenDev,
//   whenProd,
//   whenTest,
//   ESLINT_MODES,
//   POSTCSS_MODES,
// } = require('@craco/craco')
module.exports = {
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            [
              '@xianzhengquan/postcss-px-2-vw',
              {
                unitToConvert: 'px', //需要转换的单位，默认为"px"
                viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                unitPrecision: 6, //单位转换后保留的精度
                propList: [
                  //能转化为vw的属性列表
                  '*',
                ],
                viewportUnit: 'vw', // 希望使用的视口单位
                fontViewportUnit: 'vw', //字体使用的视口单位
                selectorBlackList: [], //需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
                minPixelValue: 1, //设置最小的转换数值，如果为1的话，只有大于1的值会被转换
                mediaQuery: false, //媒体查询里的单位是否需要转换单位
                replace: true, //是否直接更换属性值，而不添加备用属性
                exclude: /(\/|\\)(node_modules)(\/|\\)/, //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
              },
            ],
          ],
        },
      },
    },
  },
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      return webpackConfig
    },
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
    { plugin: logWebpackConfigPlugin },
  ],

  devServer: {
    open: false,
  },
}

完整代码放上来了，如果还有啥问题可以加入交流群，大家一起解决：
微信添加机器人： 15884572638 回复4就能加入交流群了，可以支持下副业就更好了（直接点回复的链接就能加入我的副业群了，都是甑选精品欧，人工挑选自己也经常用，放心食用~）

- 为什么使用@xianzhengquan/postcss-px-2-vw,而不是postcss-px-to-viewport
由于使用的是postcss 8.x版本，目前postcss-px-to-viewport的作者并未对postcss8.x做适配，在使用postcss8是会抛出

 PostCSS plugin autoprefixer requires PostCSS 8

其余配置craco可以参考,就不赘述，查阅的其他文章基本都是对着这个抄的，希望阁下是个搬运工，而不是伸手党
https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration
style里面postcss loader参考 的是readme中给出的postcss文档地址
https://github.com/webpack-contrib/postcss-loader
postcss-px-to-viewport插件只是内部结构引入调整，属性还是正常传参
https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md

看完应该都大致清楚了，对你有帮助再支持支持副业呗~

// 复制粘贴到wx就好啦
let wx = '15884572638'