引言：

gitchat裡有更詳細的實戰例子

本文重點：

專案環境搭建此處省略，不再贅述，需要的請查閱相關資料。

本篇只介紹，如果在vue+webpack的專案中配置，把px自動轉為rem

第一步安裝   npm install   postcss-px2rem postcss --save   

第二步  在 webpack.base.conf.js中 引入

const webpack = require('webpack')

const px2rem = require('postcss-px2rem')
const postcss = require('postcss')

第三步 在module中新增如下程式碼：需要

  //此外掛是自動把px換算成rem
  plugins: [
    new webpack.LoaderOptionsPlugin({
        // webpack 2.0之後， 此配置不能直接寫在自定義配置項中， 必須寫在此處
        vue: {
            postcss: [require('postcss-px2rem')({ remUnit: 75, propWhiteList: [] })]
        },
    })
  ]

第四步       在rules中加如下程式碼，css我是用到sass，less，所以需要引入對應的loader，不需要的可不寫。

{
        test: /\.(css|less|scss)(\?.*)?$/,
        loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}

第五步：測試  加入一下css

img{
  width: 200px;
  height: 200px;
}

重啟專案編譯執行以後  在瀏覽器檢視發現已生效

img {

1. width: 2.666667rem;
2. height: 2.666667rem;

}

完結！！

如有疑問，請留言！！！