2024-09-21 在vite中配置postcss2rem

备注一下，网上好多帖子是抄的

1. 下载依赖，我的版本
   "postcss-plugin-px2rem": "^0.8.1",
   "autoprefixer": "^10.4.20",

2. 在vite.config.js配置

import postcssPluginPx2rem from "postcss-plugin-px2rem"; //引入插件

//配置参数
const px2remOptions = {
    rootValue: 16,  //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
    unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
    mediaQuery: false, //（布尔值）允许在媒体查询中转换px
    minPixelValue: 0  //设置要替换的最小像素值(3px会被转rem)。 默认 0
}



//--在配置中css下，加入插件
css: {
            postcss: {
                plugins: [
                   // 加入rem配置项
                    postcssPluginPx2rem(px2remOptions)
                ]
            }
        }

3. 重启即可完成

postcss2rem 配置项很多网上博客都有，可以参考，基本很少有变动