postcss-pxtorem

一、概念

　　postcss-pxtorem是PostCSS的插件，用於將像素單元生成rem單位。

二、使用

　　安裝依賴之后，將postcss-pxtorem的配置都放到了vue.config.js中。

module.exports = {
  productionSourceMap: false, // 生產環境是否生成 SourceMap
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require(‘postcss-pxtorem‘)({
                rootValue: 16,
                unitPrecision: 5,
                propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
                selectorBlackList: [],
                replace: true,
                mediaQuery: false,
                minPixelValue: 0,
                exclude: /node_modules/i
          }),
        ]
      }
    }
  },
}                            

三、參數解釋

1）rootValue（Number | Function）表示根元素字體大小或根據input參數返回根元素字體大小。

2）unitPrecision （Number）允許REM單位增加的十進制數字。

3）propList （Array）可以從px更改為rem的屬性。

• 值必須完全匹配。
• 使用通配符*啟用所有屬性。例：['*']
• *在單詞的開頭或結尾使用。（['*position*']將匹配background-position-y）
• 使用!不匹配的屬性。例：['*', '!letter-spacing']
• 將“ not”前綴與其他前綴組合。例：['*', '!font*']

4）selectorBlackList （Array）要忽略的選擇器，保留為px。

• 如果value是字符串，它將檢查選擇器是否包含字符串。
  • ['body'] 將匹配 .body-class
• 如果value是regexp，它將檢查選擇器是否匹配regexp。
  • [/^body$/]將匹配body但不匹配.body

5）replace （Boolean）替換包含rems的規則。

6）mediaQuery （Boolean）允許在媒體查詢中轉換px。

7）minPixelValue（Number）設置要替換的最小像素值。

8）exclude（String, Regexp, Function）要忽略並保留為px的文件路徑。

• 如果value是字符串，它將檢查文件路徑是否包含字符串。
  • 'exclude' 將匹配 \project\postcss-pxtorem\exclude\path
• 如果value是regexp，它將檢查文件路徑是否與regexp相匹配。
  • /exclude/i 將匹配 \project\postcss-pxtorem\exclude\path
• 如果value是function，則可以使用exclude function返回true，該文件將被忽略。
  • 回調函數會將文件路徑作為參數傳遞，它應該返回一個布爾結果。
  • function (file) { return file.indexOf('exclude') !== -1; }

 四、補充

　　忽略單個屬性的最簡單方法是在像素單位聲明中使用大寫字母，將px寫為Px。

　　比如：

.ignore {
    border: 1Px solid; // ignored
    border-width: 2PX; // ignored
}