前言
尝试在
react使用postcss-px-to-viewport自适应布局，全网找遍了，基本上都要react-scripts eject去修改webpack.config.js,或者装一大堆依赖……，最后发现还不行。这里默认你已经配置好
craco，并且已经存在craco.config.js，react脚手架默认的postcss已经是8.x版本了，我这里安装了"postcss": "^7.0.36",8.x版本可以看issues，有人魔改了，npm上面的postcss-px-to-viewport和github上面的版本不一致，可以安装别人打包好的postcss-px-to-viewport-with-include，本文已7.x为例。\
发现问题，一定要去看issues，说不定有奇效。
正文
craco.config.js下的style引入require('postcss-px-to-viewport-with-include')并填写配置。
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer')(overrideBrowserslist=['last 20 versions', 'android >= 4.0', 'iOS >= 7']),
require('postcss-px-to-viewport-with-include')( {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
viewportHeight: 667, // UI
unitPrecision: 6, // 转换后的精度，即小数点位数
// propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
// 转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
// include: [/node_modules/],
landscape: false, // 是否处理横屏情况
}),
],
},
},
坑点
经测试，在postcss.config.js下加入配置无效，呜呜呜，这里测试好久，一直以为exclude的问题（也有可能是我config配置有问题，但这个配置在vue项目里面是没毛病的，有懂得大佬，请指点，呜呜呜）。
2021-12-17更：吃了不会看英文文档的亏，@craco/克拉科 - npm (npmjs.com)，设置下mode: "file" 。
const path = require('path')
module.exports=({file})=>{
return {
plugins: {
tailwindcss: {},
overrideBrowserslist: ['last 20 versions', 'android >= 4.0', 'iOS >= 7'],
'postcss-px-to-viewport-with-include': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI设计稿的宽度
viewportHeight: 667, // UI
unitPrecision: 6, // 转换后的精度，即小数点位数
// propList: 当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号，如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
// 转换的黑名单，在黑名单里面的我们可以写入字符串，只要类名包含有这个字符串，就不会被匹配。比如selectorBlackList: ['wrap'],它表示形如wrap,my-wrap,wrapper这样的类名的单位，都不会被转换
selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名，
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
replace: true, // 是否转换后直接更换属性值
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
landscape: false, // 是否处理横屏情况
},
},
}
}引用
首发于语雀文档@is_tao
@craco/craco
postcss-px-to-viewport
postcss-px-to-viewport-with-include