安裝依賴

pnpm i amfe-flexible autoprefixer postcss postcss-loader postcss-pxtorem

引入amfe-flexible

main.js 引入 amfe-flexible

import 'amfe-flexible'

創建配置文件 postcss.config.cjs

根目錄創建postcss.config.cjs

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 192,// 設計稿寬度或者目前正常分辨率的1/10
            selectorBlackList: [".ivu"],// 要忽略的選擇器並保留為px。
            minPixelValue: 2,// 設置要替換的最小像素值。
            "propList": [
                "*"
            ]// 需要做轉化處理的屬性，如`hight`、`width`、`margin`等，`*`表示全部
        }
    }
}
module.exports = {
  plugins: {
    //   tailwindcss: {},
    // 兼容瀏覽器，添加前綴
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 192, // 結果為：設計稿元素尺寸/16，比如元素寬320px,最終頁面會換算成 20rem 設計稿寬度或者目前正常分辨率的1/10
      propList: ['*'], // 是一個存儲哪些將被轉換的屬性列表，這裏設置為['*']全部，假設需要僅對邊框進行設置，可以寫['*', '!border*']
      unitPrecision: 5, // 保留rem小數點多少位
      // selectorBlackList: ['.radius'],  //則是一個對css選擇器進行過濾的數組，比如你設置為['fs']，那例如fs-xl類名，裏面有關px的樣式將不被轉換，這裏也支持正則寫法。
      replace: true, // 這個真不知到幹嘛用的。有知道的告訴我一下
      mediaQuery: false, // 媒體查詢( @media screen 之類的)中不生效
      minPixelValue: 2 // px小於2的不會被轉換
    }
  }
}