PostCss 配置

安装

autoprefixer 自动补全css浏览器前缀
postcss-pxtorem 用于将 px 单位转化为 rem 单位

sh

pnpm i -D autoprefixer postcss-pxtorem

pnpm i -D autoprefixer postcss-pxtorem

vite 配置 postcss

注意

需要在入口文件设置Rem 基准值

ts

import { defineConfig, loadEnv } from 'vite'
import autoPreFixer from 'autoprefixer'
import pxToRem from 'postcss-pxtorem'

export default defineConfig({
  css: {
    postcss: { 
      plugins: [
        autoPreFixer({
          overrideBrowserslist: 'last 2 version', // 最后2个版本
        }),
        pxToRem({
          rootValue: 37.5,
        }),
      ],
    }
  },
})

import { defineConfig, loadEnv } from 'vite'
import autoPreFixer from 'autoprefixer'
import pxToRem from 'postcss-pxtorem'

export default defineConfig({
  css: {
    postcss: { 
      plugins: [
        autoPreFixer({
          overrideBrowserslist: 'last 2 version', // 最后2个版本
        }),
        pxToRem({
          rootValue: 37.5,
        }),
      ],
    }
  },
})