vuecli3中對postcss-pxtorem插件的配置相關問題

postcss-pxtorem是一款將px轉換成rem格式的方式，本質上是以html標簽的fontsize值為基准，動態改變元素的各種計量單位

1. 安裝

npm install postcss-pxtorem --save-dev

2. 導入

//main.js
import 'postcss-pxtorem'//導入rem轉換工具

3. 配置

網上看到在安裝后vue項目根目錄下會自動生成一個postcss.config.js的配置文件，但是筆者在安裝導入postcss-pxtorem后並沒有看到該文件，筆者猜測可能是由於vuecli3移除了config目錄，僅支持vue.config.js來配置相關插件的緣故

如果沒有看到postcss.config.js可以在vue.config.js中配置postcss-pxtorem

在項目根目錄下新建vue.config.js

//vue.config.js
module.exports = {
 plugins:{
    'postcss-pxtorem': { //在這里配置postcss-pxtorem的相關配置
      rootValue: 75,// html根元素的fz大小
      propList: ['*']//作用於哪些標簽
    }
  }
}

如果根目錄中有postcss.config.js該配置文件，則：

//postcss.config.js
module.exports = {
  plugins:{
    autoprefixer:{
    },
    'postcss-pxtorem' :{
      rootValue: 75,//頁面html根節點設置的fz的大小
      propList:['*'] //匹配到的標簽
    }
  }
}

使用以上方法都可以完成postcss-pxtorem的配置

一個驗證配置是否生效的demo：

//myhome.vue
<template>
  <div class="home">
myhome
  </div>
</template>
<style lang="less" scoped>
  .home{
    width: 150px;
    height: 150px;//如果瀏覽器上顯示單位是rem，則說明配置成功
    border-bottom: 1PX solid red; //如果px單位是大寫，說明按原樣輸出
  }
</style>

如果配置生效，.home的div的寬高會轉換成rem單位，但borer-bottom屬性則不會轉換，比如：

這樣 ，就完成了在vuecli3中對postcss-pxtorem插件的配置。

以上。