postcss-pxtorem 配置 px 轉 rem 處理

這是我參與更文挑戰的第 14 天，活動詳情查看： 更文挑戰

Lynne，一個能哭愛笑永遠少女心的前端開發工程師。身處互聯網浪潮之中，熱愛生活與技術。

前言

問題： rem實現尺寸自適應設備匹配時出現樣式錯誤

要實現： postcss-pxtorem中使某些樣式不進行rem轉換

UI組件樣式問題

能夠定位這個問題爲 UI組件樣式問題。

在移動端項目中使用 postcss-pxtorem 作適配，同時也使用到了第三方 UI 庫。

在多數時候若是咱們不但願對某些文件下的組件作 px 轉 rem 處理，能夠在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 屬性來過濾掉。

exclude 配置的值能夠是字符串也能夠是正則匹配，它匹配的是文件名或目錄。用法以下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    },
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: [],
      minPixelValue: 1,
      exclude: /src/ig   // src 目錄下樣式所有不轉義
    }
  }
}
複製代碼

這時就出現了一個問題：第三方UI庫使用的是px，而postcss將頁面中的px 所有轉化成了rem，致使部分組件的樣式亂了，但有些組件是正常的，也達到了咱們想要的放大或縮小的結果，這時候怎麼處理部分組件樣式呢？

查詢postcss配置文檔後發現 其提供了selectorBlackList 屬性來忽略掉某些選擇器。

舉個栗子，我須要保證某個第三方組件xxx-datetime樣式不轉換，只須要找到它內部涉及樣式的類名，簡潔的辦法是直接用類名前綴去匹配，好比「.xxx-datetime」，若是內部涉及不加前綴的類名，就只能枚舉了。

忽然感覺到了CSS命名規範的重要性有木有！！！具體配置以下：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7', "last 2 versions"]
    },
    "postcss-pxtorem": {
      rootValue: 23.4375, // 640
      propList: ['*'],
      selectorBlackList: ['.xxx-datetime', '.scroller-component', '.scroller-indicator', 'scroller-item'],
      minPixelValue: 1,
      exclude: /src/ig    // src 目錄下樣式所有不轉義
    }
  }
}
複製代碼

總結

這個問題的解決辦法在官方文檔中就能夠找到，當時沒有仔細看文檔還糾結了很久，因此有時候查看官方文檔和issue雖然很笨，但真的有用！