vue 移動端 使用postcssrc.js 並配置文件

說明：vue移動端的項目，咱們的尺寸是按照了蘋果手機的尺寸，大屏的828

使用：首先是在vue 項目

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

在項目的底部新建一個postcssrc.js文件

module.exports = {
  'plugins': {
    'postcss-import': {}, // 用於@import導入css文件
    'postcss-url': {}, // 路徑引入css文件或node_modules文件
    'postcss-aspect-ratio-mini': {}, // 用來處理元素容器寬高比
    'postcss-write-svg': { utf8: false }, // 用來處理移動端1px的解決方案。該插件主要使用的是border-image和background來作1px的相關處理。
    'postcss-cssnext': {}, // 該插件能夠讓咱們使用CSS將來的特性，其會對這些特性作相關的兼容性處理。
    'postcss-px-to-viewport': { // 把px~~~~單位轉換爲vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。
      viewportWidth: 283, // 視窗的寬度 ，對應的是咱們設計稿的寬度，通常是750
      viewportHeight: 1792, // 視窗的高度 根據750設備的寬度來指定，通常指定1334，也能夠不配置
      unitPrecision: 3, // 將px轉化爲視窗單位值的小數位數
      viewportUnit: 'vw', // 指定要轉換成的視窗單位值
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換視窗單位值得類，能夠自定義，能夠無限添加
      minPixelValue: 1, // 小於等於1px不轉換爲視窗單位
      mediaQuery: false, // 容許在媒體查詢中使用px
      exclude: /(\/|\\)(node_modules)(\/|\\)/
    },
    'postcss-viewport-units': {}, // 給vw、vh、vmin和vmax作適配的操做,這是實現vw佈局必不可少的一個插件
    'cssnano': { // 主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一塊兒，因此不須要本身加載它。
      preset: 'advanced', // 重複調用
      autoprefixer: false, // cssnext和cssnano都具備autoprefixer,事實上只須要一個，因此把默認的autoprefixer刪除掉，而後把cssnano中的autoprefixer設置爲false。
      'postcss-zindex': false // 只要啓用了這個插件，z-index的值就會重置爲1
    }
  }
}

附上網址
https://github.com/michael-ciniawsky/postcss-load-config