craco学习: 项目中添加 px2rem/postcss 插件

一个重要的转化插件，方便移动端适配

背景

• cra5 搭建的项目
• styled-component: 需要用 babel 插件
• tailwind (这个天然处理好了，不用管)
• 普通的css，使用 postcss 插件处理

技术选型

• 主流
• github star 最多

名称	理由
针对常规css	postcss-pxtorem github 上目前 star 最多，考虑较为周全，很多主流适配
针对 styled-components	babel-plugin-styled-components-px2rem 应用了上面的插件，共用一套配置

核心依赖

{
  "babel-plugin-styled-components-px2rem": "^1.5.5",
  "postcss-pxtorem": "^6.0.0"
}

核心配置

craco 的配置，针对 postcss/styled-components

const px2remOptions = {
  rootValue: 10, // 根元素字体大小
  propList: ['*']
};

export default {
  // ... other options
  babel: {
    plugins: [['styled-components-px2rem', px2remOptions]]
  },
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [['postcss-pxtorem', px2remOptions]]
        }
      }
    }
  }
};

默认配置

• 我的配置: rootValue: 10

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
}

参考

• https://blog.csdn.net/guozhicaice/article/details/109593964
• https://github.com/cuth/postcss-pxtorem
• https://github.com/xuyuanxiang/babel-plugin-styled-components-px2rem
• https://github.com/afeiship/wsui-vw-rem