• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

vue cli4引入vant并配置自动rem换算 postcss-pxtorem和lib-flexibl + 黑名单

在引入vant的时候,我看到官方推荐了两个自动转换px为rem的插件,一个叫postcss-pxtorem,一个叫lib-flexible

他们的用法如下:

安装插件:

安装postcss-pxtorem

  npm install postcss-pxtorem --save-dev

安装lib-flexible

由于时间的问题,lib-flexible其实已经弃用了,现在是使用名为amfe-flexible的插件,amfe-flexible实际上就是在lib-flexible的基础上更新的,所以用法都是一样。

npm i -s  amfe-flexible

安装完毕只需要引入amfe-flexible

引入插件:

main.js文件引入:

import 'amfe-flexible'

创建配置文件:

在根目录,和package.json同级,创建一个名为postcss.config.js的文件,然后里面的内容我直接照搬vant提供的。

如果有这个文件,可以自行修改里面的内容,没有才创建。

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

然后保存,这个时候我们再去vue里面,对元素设置px,运行时会发现网页上自动转换成了rem单位。

百度到一个新的配置

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

黑名单

顾名思义,在黑名单中的类名,将不会自动rem转换

module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        'Android 4.1',
        'iOS 7.1',
        'Chrome > 31',
        'ff > 31',
        'ie >= 8'
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.van-notify',],
    }
  }
}
2

相关文章

微信收款码
微信收款码