react 使用 styled-components-px2vw

在vue脚手架里面做styled-components-px2vw适配的时候在根目录创建postcss.config.js即可使用

在react里面使用@craco/craco

// craco.config.js
const params = {
  unitToConvert: 'px', // 需要转换的单位，默认为"px"
  viewportWidth: 1920, // 设计稿的视口宽度
  unitPrecision: 6, // 单位转换后保留的精度
  propList: ['*'], // 能转化为vw的属性列表
  transformRuntime: true // 设置 transformation:true 之后，可以转换被字符串模板嵌套的字符串表达式
}
module.exports = {
  // 这个babel是babel-plugin-styled-components-px2vw对styled-components做vw适配
  babel: {
    plugins: [
      ["styled-components-px2vw", params],
    ],
  },
  style: {
    postcss: {
      plugins: [require('postcss-px-to-viewport')(params)],
    },
  },
};