vue 脚手架 项目中 px转rem 的方法
px转为rem
1> npm i lib-flexible --save
2> 在main.js中引入lib-flesible
import 'lib-flexible/flexible'
3> npm install px2rem-loader
4> 在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
//将px2rem-loader添加到cssLoader中。我这里设计稿750，因此设定75
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
5> 在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 改为
// const loaders = [cssLoader,px2remLoader]
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
//安装依赖
npm install lib-flexible 或者 yarn add lib-flexible
让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
在main.js引入中：
import 'lib-flexible/flexible.js'
在package.json内，在postcss内添加：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除）
"selectorBlackList": [ "vant" ],//忽略转rem项，列表中不进行转rem
"propList":["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
}
}
},
