Vue CLI 3.x 配置postcss.config.js CSS處理和移動端適配方案！

今天跟大家聊了一下 vue 中的CSS 處理：postcss.config.js

首先我們要了解一下什麼是 postcss

postcss：它是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。

• 擁有極高的處理性能（3倍以上的處理速度）
• 你既可以寫正常的CSS，也可以結合LESS或者SASS一起編寫
• 對Source Map支持更好
• 他的插件真的太多太強大太便利了

postcss 的一些不錯的插件

• autoprefixer是PostCSS最著名的一款插件，就不過多介紹了，相信同學們都使用過。
• postcss-cssnext (內置autoprefixer) 允許你使用未來的css語法，如css4（可以理解爲css中的Babel）
• postcss-sprites 自動製作雪碧圖，不用手動拼接啦，哈哈哈
• cssnano 壓縮css代碼(如果你是用webpack的話，css-loader集成了cssnano，你不需要再次引入)
• postcss-hash-classname 把轉換後的css文件名附上哈希值
• pixrem 將rem轉換爲px
• postcss-px-to-viewport 將px轉換爲vh和vw（推薦作爲移動端的計量單位，而不是rem）
• postcss-pxtorem 將px轉換爲rem

postcss 的用法

px轉rem

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
      propList: ['*']
    })
  ]
});

這裏用到了 postcss-pxtorem 將px轉換爲rem 的插件

px轉vw

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 視窗的寬度，對應的是我們設計稿的寬度，一般是750
      // viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數（很多時候無法整除）
      viewportUnit: 'vw', // 指定需要轉換成的視窗單位，建議使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不轉換爲視窗單位的類，可以自定義，可以無限添加,建議定義一至兩個通用的類名
      minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也可以設置爲你想要的值
      mediaQuery: false // 允許在媒體查詢中轉換`px`
    },
    'postcss-viewport-units': {
      // 排除會產生警告的部份
      filterRule: rule => rule.nodes.findIndex(i => i.prop === 'content') === -1
    },
    cssnano: {
      preset: 'advanced',
      autoprefixer: false, // 和autoprefixer同樣具有autoprefixer，保留一個
      'postcss-zindex': false
    }
  }
}

這裏用到了 postcss-px-to-viewport，將px單位自動轉換成viewport單位。postcss-px-to-viewport 文檔

好了就先到這裏了！最近項目太忙一個接一個，我會抽時間給大家分享一些乾貨的！

---

喜歡博主的可以點贊關注一下

喜歡博主的可以點贊關注一下

長得美的，長得帥的都關注了

現在就差你了

還不長按關注一下