Vue中使用px2rem

在做移动端项目时rem是必不可少的；
首先安装px2rem：

npm install px2rem-loader -s
npm install lib-flexible —s

然后在main.js中引入lib-flexible

import 'lib-flexible/flexible'

在vue项目中build下的 utils.js中，找到generateLoaders 方法修改配置：

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64//设计稿宽度/10
    }
  };

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    var loaders = [cssLoader, px2remLoader];//添加px2rem 插件
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

安装配置结束后，重启项目 。然后再浏览器中查看。会发现自己设置的px被转为rem 了

作者：嘤夏影
链接：https://www.jianshu.com/p/1a5c4afe3c4f
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。