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

源文件鏈接：

https://www.cnblogs.com/taohuaya/p/10274993.html

如何在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
                    }), // 換算的基數
                ]
            }
        }
    },
}

記得npm i 安裝包；

可能遇到的坑：

　　如果個別地方不想轉化px。可以簡單的使用大寫的 PX 或 Px 。