vue中px转换成rem

vue中px转换rem

1.npm i lib-flexible px2rem-loader --save
2.main.js导入 import ‘lib-flexible/flexible’
3.在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，
如：

/*const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  } */
  将上边代码块注释换成下边这样的代码：
  const cssLoader = {
	    loader: 'css-loader',
	    options: {
	      minimize: process.env.NODE_ENV === 'production',
	      sourceMap: options.sourceMap
	    }
	  }
	  const px2remLoader = {
	    loader: 'px2rem-loader',
	    options: {
	      remUnit: 32   //根据psd的尺寸  /10 得来 
	      // remUnit一般为32，这样可以适应任何宽度的手机屏幕
	    }
	  }

同时，在generateLoaders方法中添加px2remLoader，代码如下：

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
}

配置完成之后，重启项目，就可以在vue脚手架中正常使用px来编写代码，这个会自动将px转换成rem。