乐趣区

关于react.js:reactcraco移动端使用postcsspxtoviewport自适应布局

jiezi

前言

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

退出移动版