記錄一次postcss-plugin-px2rem失效問題

假夫譚發表於2019-06-28
CSSPluginREM

背景

工作中有一個專案，最開始的時候配置了使用postcss-plugin-px2rem做簡單的rem適配。

環境

@vue/cli V3.6.3

postcss-plugin-px2rem V0.8.1

配置方式

vue.config.js

module.exports = {
  css: {
  loaderOptions: {
  postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            remValue: 100,
            mediaQuery: true, //（布林值）允許在媒體查詢中轉換px。
            minPixelValue: 3 //設定要替換的最小畫素值(3px會被轉rem)。 預設 0
          })
        ]
      }
    }
  }
}
複製程式碼

一開始的時候專案正常執行，也能轉換。後來一直沒有關注過這個專案。今天突然來看看這個專案，發現這個規則失效了。又是看官方文件，又是看部落格的，甚至還懷疑less是不是要做額外的配置（我在另外一個專案中用sass是可以的）。最終發現package.json中

"postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  }
複製程式碼

我心想，這裡配置了postcss的外掛，但是裡面沒有配置postcss-plugin-px2rem，是不是這裡也要配置。於是嘗試：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-plugin-px2rem":{
            "rootValue": 100, 
            "mediaQuery": true,
            "minPixelValue": 3
      }
    }
  }
複製程式碼

神奇地發現可以了。。。。

雖然解決了，但是我仍然不知道原因。我的感覺是，vue.config.js中的配置，最終應該會合併到postcss的外掛裡面去的呀，為什麼這裡會失效呢。請知道的大神不吝告知，謝謝

相關文章