postcss postcss-pxtorem将px转为rem的实现

使用背景：

    使用vite搭建vue的H5项目，将px单位转换为rem

首先， 安装命令：

npm install postcss postcss-pxtorem --save-dev
// 或者
npm i postcss postcss-pxtorem -D

然后，增加vite.config.js配置：

下面是按照1rem=14px进行配置的

import { defineConfig } from 'vite';
import postCssPxToRem from 'postcss-pxtorem'


export default defineConfig({
    css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    rootValue: 14,// 1rem 的大小
                    propList: ['*']
                }),
                autoprefixer({
                    grid: true
                })
            ]
        }
    },
})

代码开发正常写px，编译运行之后会自动编译为rem单位：

div {
         font-size: 18px;
         font-weight: 800;
         color: #000;
    }

运行之后：

div {
    font-size: 1.28571rem;
    font-weight: 800;
    color: #000;
}

以上是在vite架构中的配置，其他架构仅供参考，根据自己的架构进行更改。