vue-cli3.0 使用postcss-plugin-px2rem（推薦）和 postcss-pxtorem（postcss-px2rem）自動轉換px爲rem 的配置方法；

如何在vue-cli3.0中使用postcss-plugin-px2rem 插件

插件的做用是 自動將vue項目中的px轉換爲rem 。

爲何這三個中要推薦  postcss-plugin-px2rem呢？

　　由於 postcss-plugin-px2rem 這個插件  配置選項上有  exclude 屬性，它能夠配置 是否對 某個文件夾下的全部css文件不進行從px到rem的轉換。

　　因此咱們能夠利用這個特性，把項目中的  node_module 文件夾排除掉。這樣若是咱們項目中是用了，前端UI框架的話，就不會吧UI框架（Vant,Element等）中的 px單位轉換成rem了

postcss-plugin-px2rem官方文檔：https://www.npmjs.com/package/postcss-plugin-px2rem

postcss-pxtorem官方文檔：https://www.npmjs.com/package/postcss-pxtorem

postcss-px2rem官方文檔：https://www.npmjs.com/package/postcss-px2rem

使用時分別npm對應的插件：

npm i postcss-plugin-px2rem  --save -dev

或選擇

npm i postcss-pxtorem  --save -dev

或選擇

npm i postcss-loader --save-dev

具體配置方法以下：

• 在vue-cli3.0中。去掉了build和config文件夾。全部的配置都放到了vue.config.js中（默認爲空，若是沒有這個文件本身寫一個）。

先上代碼，vue.config.js的配置以下

module.exports = {
    //反向代理的配置
    devServer: {
        proxy: {
            '/api': {
                target: 'http://m.maoyan.com',//目標地址
                ws: true, //// 是否啓用websockets
                changeOrigin: true, //開啓代理：在本地會建立一個虛擬服務端，而後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
                pathRewrite: {'^/api': '/'}    //這裏重寫路徑
            }

        }
    },
    //px轉rem的配置（postcss-plugin-px2rem插件）
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        // rootValue: 100, //換算基數， 默認100  ，這樣的話把根標籤的字體規定爲1rem爲50px,這樣就能夠從設計稿上量出多少個px直接在代碼中寫多上px了。
                        // unitPrecision: 5, //容許REM單位增加到的十進制數字。
                        //propWhiteList: [],  //默認值是一個空數組，這意味着禁用白名單並啓用全部屬性。
                        // propBlackList: [], //黑名單
                        exclude: /(node_module)/,  //默認false，能夠（reg）利用正則表達式排除某些文件夾的方法，例如/(node_module)/ 。若是想把前端UI框架內的px也轉換成rem，請把此屬性設爲默認值
                        // selectorBlackList: [], //要忽略並保留爲px的選擇器
                        // ignoreIdentifier: false,  //（boolean/string）忽略單個屬性的方法，啓用ignoreidentifier後，replace將自動設置爲true。
                        // replace: true, // （布爾值）替換包含REM的規則，而不是添加回退。
                        mediaQuery: false,  //（布爾值）容許在媒體查詢中轉換px。
                        minPixelValue: 3 //設置要替換的最小像素值(3px會被轉rem)。 默認 0
                    }),
                ]
            }
        }
    },


}

上面反向代理的配置請忽略（與本例無關）。

如何把html表情的1rem規定爲50px呢，請移步這個連接：https://github.com/Ta0hua/myCssRem

 

在vue-cli3中使用postcss-pxtorem和 postcss-px2rem 配置相似，以下：

使用postcss-pxtorem 時vue.config.js配置：

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({//這裏是配置項，詳見官方文檔
                        rootValue : 1, // 換算的基數
                        selectorBlackList  : ['weui','mu'], // 忽略轉換正則匹配項
                        propList   : ['*'],
                    }),
                ]
            }
        }
    },
}

使用postcss-px2rem時的vue.config.js配置：

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ //配置項，詳見官方文檔
                        remUnit: 30
                    }), // 換算的基數
                ]
            }
        }
    },
}

可能遇到的坑：

　　若是個別地方不想轉化px。能夠簡單的使用大寫的 PX 或 Px 。