更新于

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

发布于 / 分类: vue 项目实战 / 暂无评论 / 阅读量: 283

在引入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: ['*']
    }
  }
}

暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买