1

postcss.config.js

@@ -0,0 +1,57 @@
+// 根据环境变量决定是否启用 px 转 rem
+const isProduction = process.env.NODE_ENV === 'production';
+const enablePxToRem = process.env.ENABLE_PX_TO_REM !== 'false';
+
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    // 只在生产环境或明确启用时转换 px 为 rem
+    ...(enablePxToRem && {
+      'postcss-pxtorem': {
+        // 根元素字体大小，通常是 16px
+        // 你可以根据设计稿调整这个值
+        // 如果设计稿是 750px 宽度，可以设置为 37.5
+        // 如果设计稿是 375px 宽度，可以设置为 37.5
+        rootValue: process.env.REM_ROOT_VALUE || 16,
+        
+        // 需要转换的属性，* 表示所有属性
+        propList: ['*'],
+        
+        // 不转换的选择器，可以添加特定的类名
+        selectorBlackList: [
+          '.no-rem', // 添加 .no-rem 类来阻止转换
+          '.px-only', // 添加 .px-only 类来阻止转换
+          '.keep-px' // 添加 .keep-px 类来阻止转换
+        ],
+        
+        // 是否替换属性值
+        replace: true,
+        
+        // 是否转换媒体查询中的 px
+        mediaQuery: false,
+        
+        // 最小转换的像素值，小于等于此值的不转换
+        minPixelValue: 1,
+        
+        // 排除的目录
+        exclude: /node_modules/i,
+        
+        // 转换后的精度，小数点后几位
+        unitPrecision: 5,
+        
+        // 自定义转换函数
+        transformUnit: function(value, unit) {
+          const numValue = parseFloat(value);
+          
+          // 如果值小于等于 1px，不转换（保持像素）
+          if (numValue <= 1) {
+            return value + unit;
+          }
+          
+          // 如果值大于 1px，转换为 rem
+          return (numValue / 16) + 'rem';
+        }
+      }
+    })
+  }
+};