前言尝试在react中使用postcss-px-to-viewport自适应布局，搜遍全网，基本都是react-scriptseject来修改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为例。\如果你发现问题，你必须去问题，也许它会创造奇迹。craco.config.js文本下的样式引入require('postcss-px-to-viewport-with-include')并填写配置。样式：{postcss：{插件：[require('tailwindcss'),require('autoprefixer')(overrideBrowserslist=['last20versions','android>=4.0','iOS>=7']),require('postcss-px-to-viewport-with-include')({unitToConvert:'px',//转换的单位viewportWidth:375,//UI设计稿的宽度viewportHeight:667,//UIunitPrecision:6,//转换后的精度，即小数点后的位数//propList:当我们不想对某些属性的单位进行转换时，可以在数组后面加上!号在前面，如propList:["*","!letter-spacing"]，意思是：转换所有css属性的单位，除了letter-spacingpropList:['*'],//指定的单位convertedcssattributes,*代表所有cssattribute所有单位都转换viewportUnit:'vw',//指定要转换成的窗口单位，默认是vw,默认是vw//黑名单f或者转换，在black列表中我们可以写字符串，只要类名中包含这个字符串，就不会被匹配到。例如selectorBlackList:['wrap'],表示wrap,my-wrap,wrapper等类名的单位不转换selectorBlackList:['ignore'],//指定不转换的类给windowunitName,minPixelValue:1,//默认值为1，如果小于等于1px，则不进行转换mediaQuery:true,//媒体查询的css代码中是否转换，默认为falsereplace:true,//是否直接转换替换属性值exclude:[/node_modules/],//设置忽略文件，使用正则模式匹配目录名//include:[/node_modules/],landscape:false,//是否处理横屏情况}),],},},测试坑点后，在postcss.config.js下添加配置无效，呜呜呜，我一直在这里测试一个好久了，一直以为exclude有问题（也有可能是我的config配置有问题，但是这个配置在vue项目中。没毛病，有知道的大佬们指点一下，呜呜呜）。2021-12-17更新：一直苦恼看不懂英文文档，@craco/craco-npm(npmjs.com)，设置模式："file"。constpath=require('path')module.exports=({file})=>{return{plugins:{tailwindcss:{},overrideBrowserslist:['last20versions','android>=4.0','iOS>=7'],'postcss-px-to-viewport-with-include':{unitToConvert:'px',//转换单位viewportWidth:375,//UI设计稿宽度viewportHeight:667,//UIunitPrecision:6,//转换后的精度，即小数位数//propList:当我们不想对某些属性的单位进行转换时，可以在数组后面加上！前面，如propList:["*","!letter-spacing"]，意思是：所有css属性的单位都转换了，除了letter-spacingpropList:['*'],//指定单位转换后的css属性的个数，*表示转换所有css属性的单位viewportUnit:'vw',//指定转换成的窗口单位，默认为vw被字体转换成，默认是vw//black转换List，我们可以在黑名单中写字符串，只要类名包含这个字符串，就不会被匹配。例如selectorBlackList:['wrap'],表示wrap,my-wrap,wrapper等类名的单位不转换selectorBlackList:['ignore'],//指定不转换的类给windowunitName,minPixelValue:1,//默认值为1，如果小于等于1px，则不进行转换mediaQuery:true,//媒体查询的css代码中是否转换，默认为falsereplace:true,//是否直接转换替换属性值exclude:[/node_modules/],//设置忽略文件，使用正则表达式匹配目录名landscape:false,//是否处理横向screensituations},},}}首先引用于语雀文档@is_tao@craco/cracopostcss-px-to-viewportpostcss-px-to-viewport-with-include
