lib-flexxble
一养盗、項(xiàng)目中安裝lib-flexible
npm install lib-flexible --save
二、在項(xiàng)目的入口js文件中引入lib-flexible
import 'lib-flexible'
三纫溃、使用px2rem-loader自動(dòng)將css中的px轉(zhuǎn)換成rem
安裝px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem-loader
1.打開build/utils.js文件父能，找到exports.cssLoaders方法臣镣，在里面添加如下代碼
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}
2.修改generateLoaders方法中的loaders
// 注釋掉這一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改為
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
然后重新npm run dev盼理，打開控制臺(tái)可以看到代碼中的px已經(jīng)被轉(zhuǎn)成了rem
注意：
1.此方法只能將.vue文件style標(biāo)簽中的px轉(zhuǎn)成rem谈山，不能將script標(biāo)簽和元素style里面定義的px轉(zhuǎn)成rem
2.如果在.vue文件style中的某一行代碼不希望被轉(zhuǎn)成rem，只要在后面寫上注釋 /* no*/就可以了
