前言

尝试在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