安装依赖
pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem lib-flexible-computer
在根目录中创建文件postcss.config.cjs
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 192, // 设计稿宽度除以 10, 开头大写的Px 不转换 => height: 100Px, 内联样式不转换,需要 / 75 转成 rem
unitPrecision: 2, // 计算结果保留 6 位小数
selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
propList: ['*'], // 可以从px更改为rem的属性 感叹号开头的不转换
replace: true, // 转换成 rem 以后,不保留原来的 px 单位属性
mediaQuery: true, // 允许在媒体查询中转换px。
minPixelValue: 2 // 设置要替换的最小像素值。
// exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
}
}
}
在main.ts里引入
import "lib-flexible-computer";