vue項目開發之樣式篇——postcss插件

一、postcss插件簡介及安裝

PostCSS是一款使用插件去轉換CSS的工具，有許多非常好用有趣的插件，例如autoprefixer,press或者postcss-preset-env等。這些都是基於postcss插件去實現的。postcss插件需要結合webpack打包工具去一起使用，另生產樣式文件時還可以結合gulp使用。
安裝方法：先安裝插件

npm i -s postcss-preset-env

再配置文件：使用.postcssrc(JSON),.postcssrc.js或者postcss.config.js

二、插件介紹

1.postcss-advanced-variables

可以像scss一樣，在css文件中寫變量 、條件、循環語法。
☞官方文檔

2.postcss-partial-import

可以使用@import引入別的模塊樣式
☞官方文檔

3.postcss-px-to-viewport（移動端適配方案）☆☆☆

適合於移動端適配方案開發，將px單位轉化成vh,vw百分比
配置如下：

'postcss-px-to-viewport': {
      unitToConvert: "px", // 默認值`px`，需要轉換的單位
      viewportWidth: 375, // 視窗的寬度,對應設計稿寬度
      viewportHeight: 667, // 視窗的高度, 根據375設備的寬度來指定，一般是667，也可不配置
      unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數
      propList: ["*"], // 轉化爲vw的屬性列表
      viewportUnit: "vw", // 指定需要轉換成視窗單位
      fontViewportUnit: "vw", // 字體使用的視窗單位
      selectorBlaskList: [".ignore-"], // 指定不需要轉換爲視窗單位的類
      mediaQuery: false, // 允許在媒體查詢中轉換`px`
      minPixelValue: 1, // 小於或等於`1px`時不轉換爲視窗單位
      replace: true, // 是否直接更換屬性值而不添加備用屬性
      exclude: [], // 忽略某些文件夾下的文件或特定文件
      landscape: false, // 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: "vw", // 橫屏時使用的單位
      landscapeWidth: 1134 // 橫屏時使用的視窗寬度
    }

注意：
1、@media 默認不轉化px，可配置mediaQuery: true
2、@keyframes 默認不轉化px，可手動轉vw
☞官方中文文檔

4.autoprefixer

可根據不同瀏覽器生產兼容瀏覽器樣式前綴，不用手動一一添加前綴
☞官方中文文檔

5.precss

可以像scss一樣，在css文件中寫混合、模塊化語法。
☞官方中文文檔

更多有趣的插件請☞這裏

6.postcss-cssnext

7.postcss-modules

8.stylelint

9.LostGrid

三、配置

安裝好項目依賴後postcss在根目錄下配置postcss.config.js文件，代碼如下

module.exports = {
  plugins: {
    "postcss-partial-import": {},
    precss: {},
    "postcss-advanced-variables": {},
    autoprefixer: {},
    'postcss-px-to-viewport': {
      unitToConvert: "px", // 默認值`px`，需要轉換的單位
      viewportWidth: 375, // 視窗的寬度,對應設計稿寬度
      viewportHeight: 667, // 視窗的高度, 根據375設備的寬度來指定，一般是667，也可不配置
      unitPrecision: 3, // 指定`px`轉換爲視窗單位值的小數位數
      propList: ["*"], // 轉化爲vw的屬性列表
      viewportUnit: "vw", // 指定需要轉換成視窗單位
      fontViewportUnit: "vw", // 字體使用的視窗單位
      selectorBlaskList: [".ignore-"], // 指定不需要轉換爲視窗單位的類
      mediaQuery: false, // 允許在媒體查詢中轉換`px`
      minPixelValue: 1, // 小於或等於`1px`時不轉換爲視窗單位
      replace: true, // 是否直接更換屬性值而不添加備用屬性
      exclude: [], // 忽略某些文件夾下的文件或特定文件
      landscape: false, // 是否添加根據landscapeWidth生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit: "vw", // 橫屏時使用的單位
      landscapeWidth: 1134 // 橫屏時使用的視窗寬度
    }
  }
}

後續更新。。。