使用webpack解決px轉rem的自適應問題

現在的專案配置已經可以正常執行
接下來我們要考慮下一個問題，由於VUE主要適用於移動端，所以我們需要一個自適應方案
由於這是一個大眾需求的剛需方案，所以我們大可不必自己手動去寫JS程式碼，重複造輪子

那麼我們要如何解決這個問題呢？

和前面使用過的各種loader一樣，我們可以通過裝載一個loader來實現功能

然後只是裝載還不行，因為要使用到VUE裡，我們還需要手動配置一下。
所以現在去VUE的官方文件查詢→生產環境配置，找到VUE在webpack如何設定前處理器
（px轉rem也屬於CSS預處理）

然後瞭解大概語法後，我們就可以在Npmjs.com搜尋與Px、rem相關的loader

本次教程使用的是px2rem-loader
在配置檔案中修改以下程式碼

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options:{
        loaders:{
            css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8',
            scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=75&remPrecision=8!sass-loader'
        }
    }
}
 

效果圖：

然後我們重新啟動webpack-dev-server,開啟網頁，重新整理頁面看一下，元素的px是否已經轉化成rem
上面的程式碼中，你可能會有不懂的地方，但我不會直接寫出來告訴你
請自行前往npm搜尋到對應外掛，然後進入開源作者的github中查詢，動手加深記憶