1.下載lib-flexible
cnpm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.安裝px2rem-loader
cnpm install px2rem-loader
4.配置px2rem-loader
在build文件中找到util.js废离，將px2rem-loader添加到cssLoaders中，將下面代碼加進cssLoaders方法中
constpx2remLoader = {
? ? loader: 'px2rem-loader',
? ? options: {
? ? ? remUint: 75? ? }
? }
同時枣接，在generateLoaders方法中添加px2remLoader
? function generateLoaders (loader, loaderOptions) {
? ? constloaders = [cssLoader, px2remLoader]
? ? if (options.usePostCSS) {
? ? ? loaders.push(postcssLoader)
? ? }
? ? if (loader) {
? ? ? loaders.push({
? ? ? ? loader: loader +'-loader',
? ? ? ? options: Object.assign({}, loaderOptions, {
? ? ? ? ? sourceMap: options.sourceMap
? ? ? ? })
? ? ? })
? ? }
5盒至、重啟
當配置完之后，重啟下服務争舞，px會自動轉化為rem了
npm run dev
6凛忿、注意事項
1、不能在index.html的頭部加 name 為 viewport 的 meta 標簽竞川，flexible會自動為我們添加店溢！
2、對css中文字樣式增加/* px */后綴流译，會編譯出適應不同dpr的字號
3逞怨、對邊框樣式增加/* no */后綴，會保持原樣
.box{
? ? border: 1px solid #fff; /* no */}
// 會被編譯成如下：.box{
? ? border: 1px solid #fff;
}
