vue px 转换 rem 插件

• 1、配置 flexible

  安装 lib-flexible

  打开命令行 安装

  npm i lib-flexible --save

• 2.在项目入口文件 main.js 里 引入 lib-flexible引入 lib-flexible

  import 'lib-flexible/flexible'

• 3.在项目根目录的 index.html 中添加如下 meta添加 meta 标签

  px 转 rem

  实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。

• 将 px 转换成 rem 我们将使用 px2rem 这个工具，它有 webpack 的 loader：[px2rem-loader]
  安装 px2rem-loader

  在命令行中运行如下安装：

npm install px2rem-loader

修改配置文件

• 1 在utils.js中加入

   const px2remLoader = {
  
     loader: 'px2rem-loader',
  
     options: {
  
    remUnit: 37.5
  
    }
  
  }
  

image

• 并修改下面代码

   // generate loader string to be used with extract text plugin
  
      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',
  
           publicPath:'../../'
  
          })
  
        } else {
  
        return ['vue-style-loader'].concat(loaders)
  
      }
  
    }
  

image