使用 lib-flexible 和 px2rem-loader 自动转换

node -v vue -V 安装webpack脚手架 npm install webpack webpack-cli -g

一.初始化项目

vue init webpack myweb

二.安装插件

npm install lib-flexible --save
npm install px2rem-loader --save-dev

–save-dev || -D //开发依赖（辅助）
--save || -S // 运行依赖（发布）

注意:

index.html 下修改:(无需自己增加html页面name=viewport的meta元标签。flexible会自动添加)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

build.js里面添加 px2remLoader

  //增加代码，px转rem配置
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192 //根据视觉稿，rem为px的十分之一，720宽度px 72rem
    }
  }

  function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  

变成了54px why?