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`等，`*`表示全部
        }
    }
},