Vue项目中 px转为rem

Vue项目中 px转为rem

vue2.x

 npm i lib-flexible --save
   

在main.js中引入lib-flesible

import 'lib-flexible/flexible'

npm install px2rem-loader

在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
       }
    }

在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
		 })
		})
	}

vue3.x

npm install postcss-pxtorem --save-dev
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`等，`*`表示全部
        }
    }
}

完成后 重启项目