vue3.0+vite+ts項目搭建-postcss-pxtorem 實現移動自適應(五)

這里不考慮大屏,所以不做amfe-flexible的配置

首先是安裝依賴

yarn add postcss-loader postcss-pxtorem -D
yarn add autoprefixer -D

然后新建postcss.config.js文件

module.exports = {
  'plugins': {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'not ie <= 11',  //不考慮IE瀏覽器
        'ff >= 30', //僅新版本用“ff>=30
        '> 1%',//  全球統計有超過1%的使用率使用“>1%”;
        'last 2 versions', // 所有主流瀏覽器最近2個版本
      ],
      grid: true ,// 開啟grid布局的兼容(瀏覽器IE除外其他都能兼容grid，可以關閉開啟)
    },
    'postcss-pxtorem': {
      rootValue: 37.5, // 設計稿寬度除以 10，  開頭大寫的Px 不轉換 => height: 100Px, 內聯樣式不轉換，需要 / 75 轉成 rem
      unitPrecision: 6, // 計算結果保留 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 內文件禁止轉換)
    }
  }
}

不要用require的方式引入,否則會報錯,就像下面的這種引入方式會報樣式錯誤

 

module.exports = {
  "plugins": [
    require('postcss-import'),
    require('postcss-url'),
    require('autoprefixer')({browsers: ['Android >= 4.0', 'iOS >= 7']}),
    require('postcss-pxtorem')({
      rootValue: 75, // 設計稿寬度除以 10，  開頭大寫的Px 不轉換 => height: 100Px, 內聯樣式不轉換，需要 / 75 轉成 rem
      unitPrecision: 6, // 計算結果保留 6 位小數
      selectorBlackList: ['am-'], // 排除，am-開頭的class，不進行rem轉換
      propList: ['*', '!font-weight', '!letter-spacing'], // 可以從px更改為rem的屬性  感嘆號開頭的不轉換
      replace: true, // 轉換成 rem 以后，不保留原來的 px 單位屬性
      mediaQuery: true, // 允許在媒體查詢中轉換px。
      minPixelValue: 0, // 設置要替換的最小像素值。
      exclude: /node_modules/i // 排除 node_modules 文件(node_modules 內文件禁止轉換)
    })
  ]
}

 

報錯如圖,會有三個這樣的報錯

[vite] Internal server error: Unexpected string
Plugin: vite:css