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中，將下面代碼加進(jìn)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、重啟

當(dāng)配置完之后，重啟下服務(wù)，px會自動轉(zhuǎn)化為rem了

npm run dev

6、注意事項(xiàng)

1、不能在index.html的頭部加 name 為 viewport 的 meta 標(biāo)簽，flexible會自動為我們添加！

2、對css中文字樣式增加/* px */后綴，會編譯出適應(yīng)不同dpr的字號

3、對邊框樣式增加/* no */后綴，會保持原樣

.box{

? ? border: 1px solid #fff; /* no */}

// 會被編譯成如下：.box{

? ? border: 1px solid #fff;

}