58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
// 根据环境变量决定是否启用 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';
|
||
}
|
||
}
|
||
})
|
||
}
|
||
};
|