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

前言

尝试在react使用postcss-px-to-viewport自适应布局,全网找遍了,基本上都要react-scripts eject去修改webpack.config.js,或者装一大堆依赖……,最后发现还不行。

这里默认你已经配置好craco,并且已经存在craco.config.jsreact脚手架默认的postcss已经是8.x版本了,我这里安装了"postcss": "^7.0.36",8.x版本可以看issues,有人魔改了,npm上面的postcss-px-to-viewportgithub上面的版本不一致,可以安装别人打包好的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, // 是否处理横屏情况
        }),
      ],
    },
  },

react(craco)移动端使用postcss-px-to-viewport自适应布局_第1张图片

react(craco)移动端使用postcss-px-to-viewport自适应布局_第2张图片

坑点

经测试,在postcss.config.js下加入配置无效,呜呜呜,这里测试好久,一直以为exclude的问题(也有可能是我config配置有问题,但这个配置在vue项目里面是没毛病的,有懂得大佬,请指点,呜呜呜)。

2021-12-17更:吃了不会看英文文档的亏,@craco/克拉科 - npm (npmjs.com),设置下
mode: "file"

react(craco)移动端使用postcss-px-to-viewport自适应布局_第3张图片

react(craco)移动端使用postcss-px-to-viewport自适应布局_第4张图片

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

你可能感兴趣的:(react.js前端)